jQueryUI droppable : over and out callback firing out of sequence

Question

UPDATED

js fiddle (updated) here

i want to know, Whether dragging element is inside any column or not?

it's works for me when i drag Left to right but not working when i drag right to left.

enter image description here

jS

var isOutside = true;

$('.drag').draggable({
    helper : 'clone',
    drag : function(e, ui){
        if(isOutside)    
           return;
        //here is my code;
    },
});

$('.column').droppable({

    over : function(){
        isOutside = false;
        $('p').text('dragging inside');
    },
    out : function(){
         isOutside = true;
         $('p').text('dragging outside');
    }
});

You know there isn't even a question mark anywhere in your "question", what is the question exactly? What is it you are trying to achieve? So they fire out of sequence, but how is that a problem? We can't fix the browser so you have to bound that problem by telling us what you want to achieve and why what you have isn't working for you. Please add some more details ... (see, this text has several questions :)). — Jonas Schubert Erlandsson, Mar 12 '13 at 11:32

score 3 · Answer 1 · answered Mar 12 '13 at 11:41

The reason why this, most probably, happens is that the mouse doesn't travel along a continuous path, it jumps. When you move it slowly you jump a pixel or two each time, so you don't notice it. When you flail it around wildly you can jump over 100 pixels between polls.

Since your mouse is now over something else it's normal for the event for that to trigger first and then, when the browser loop catches up, the out event is detected as well. One can say that the "importance" of the over event is higher since it's a callback (mouse moved) and not a poll (what else do I have lying around?).

If you want something to happen and depend on the order of these events I suggest you check in your over handler that any out actions are taken before handling the over event. Basically you do this:

On first over event (the variable is null) save what is the current element.
On the next over event where the variable is not the current element handle the out event for the old element and set the variable to the currently hovered element.
On an out event handle the out and set the element to null.

This will give you a forced order of events even if the actual over happens before the preceding out.

You can also use the out event only to track is the mouse is out of all the drop zones and do some reset there. And use the over event to handle all the in drop zone dragging...

jQueryUI droppable : over and out callback firing out of sequence

1 Answers1