javascript - 拖动时调用的可放置代码

Question

我不知道为什么当我将项目拖到可放置区域上时会触发以下警报？

$(".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'//,   
}
        });

这是调用堆栈中被调用的最靠前的行：

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

包含在 jquery-1.7.2.js 中

那行代码在：

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;
            };

如果您将此代码粘贴到小提琴中 - jsfiddle.net/Xz3u2 它应该重新创建错误：

$(".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

试试这样：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');
    }
});