Is there a way that the element with is being dragged can be "aware"
that it is being dragged?

I have a sortable list where the handle appears when the elements are
moused over (somewhat like Basecamp lists) but have a problem if
elements are dragged fast, especially in IE, in that the mouseout
event fires and the handles are hidden, causing all sorts of visual
chaos.

Thus what I want to do is put an "if (element.is_being_dragged)
return;" in the mouseout function, or have an "onStart" and "onEnd" to
set a flag to tell the handle not to disappear, which is what I've
done for the delete confirmation dialog.

Here's my current code, feel free to giggle at it... or make
suggestions!

        Tiger.GadgetSortableItem = Class.create({
                initialize: function (element) {
                        this.el = $(element);
                        this.number = this.el.identify().gsub(/[^0-9]+/,'');
                        this.content = this.el.innerHTML;
                        this.lockvisible = false;
                        this.showGadgetsBound = 
this.showGadgets.bindAsEventListener(this);
                        this.hideGagdetsBound = 
this.hideGagdets.bindAsEventListener(this);
                        this.deleteActionBound =
this.deleteAction.bindAsEventListener(this);
                        if (this.el.hasClassName('sticky') ) {
                                this.del = new Element('img', { src: 
'blank.gif', height : 15,
width: 15, alt: '' });
                        } else {
                                this.del = new Element('a', { href: '#', title 
: 'Delete'})
                                        .update('<img src="delete_item.gif" 
height="15" width="15"
title="Delete" alt="X" />')
                                        .observe('click', 
this.deleteActionBound  );
                        }
                        this.gadgets = new Element('div', { className : 
'item_gadgets' })
                                .update('<img src="move_item.gif" height="15" 
width="15"
class="handle" title="Move" alt="+" />')
                                .insert({ 'top' : this.del })
                                .hide();
                        this.el.addClassName('item_wrap')
                                .update('<div class="item_content">' + 
this.content + '</div>')
                                .insert({ 'top' : this.gadgets })
                                .observe('mouseover', this.showGadgetsBound )
                                .observe('mouseout', this.hideGagdetsBound );
                },
                showGadgets: function(event) {
                        $('debug').insert( '\nIn: ' + event.element().tagName );
                        this.gadgets.show();
                        event.stop();
                },
                hideGagdets: function(event) {
                        $('debug').insert( '\nOut: ' + event.element().tagName 
);
                        if (!this.lockvisible) {
                                this.gadgets.hide();
                        }
                        event.stop();
                        },
                deleteAction: function(event) {
                        $('debug').update( this.number );
                        this.lockvisible = true;
                        if (confirm('Are you sure you want to delete item '+ 
this.number
+'?')) {
                                this.el.remove();
                        } else {
                                this.lockvisible = false;
                                this.gadgets.hide();
                        };
                        event.stop();
                }
        });

        Tiger.GadgetSortable = Class.create({
                initialize: function(element) {
                        this.listElement = $(element);
                        this.listElement.childElements().each( function(item) {
                                new Tiger.GadgetSortableItem(item);
                        });
                        Sortable.create(this.listElement,{
                                ghosting:false,
                                handle:'handle',
                                onUpdate: function(sortable){
                                        
$('sequence').update(Sortable.serialize(sortable,
{name:'favlist'}));
                                }
                        });
                }
        });

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to