Question

I don’t know why the below alert gets fired when I drag an item over the droppable area ?

$(".all").droppable({ 
    drop: function(event, ui) { 
       alert('should just fire when a item is dropped');
    }
}); 



$("li").draggable({
            connectToSortable : ".mySortable",
            helper : "clone",
            revert : "invalid",
            scroll: true,
            cursor: 'move'//,   
}
        });

Here is the line furthest up in the call stack that gets called :

jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :

Which is contained in jquery-1.7.2.js

That line of code is within :

if ( !eventHandle ) {
            elemData.handle = eventHandle = function( e ) {
                // Discard the second event of a jQuery.event.trigger() and
                // when an event is called after a page has unloaded
                return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?


jQuery.event.dispatch.apply( eventHandle.elem, arguments ) :

                    undefined;
            };

If you paste this code into the fiddle – jsfiddle.net/Xz3u2 it should re-create the error :

$(".all2").sortable({
            revert : true
        });
$(".all").droppable({ 
    drop: function(event, ui) { 
       alert('should just fire when a item is dropped');
    }
}); 

$(".all2").draggable({
            connectToSortable : ".all2",
});​

Answer 1

Try like this: http://jsfiddle.net/Xz3u2/2/

$(".all2").sortable({
            revert : true
        }).draggable();
$(".all").droppable({
    accept: '.all2',
    drop: function(event, ui) {
       alert('should just fire when a item is dropped');
    }
});