如果您将项目从源列表框拖放到目标列表框的速度非常快,则不会触发放置处理程序.
我已经在FF 10,Chrome 17和IE 9中测试了相同的结果.
要对其进行测试,通常将其从左侧的列表框中拖到右侧的一个框中.一旦删除,您将看到一个复选框已添加到该项目.另外,日志输出到控制台.
但是,如果您真正快速地拖放,则不会看到复选框或日志.您可能需要尝试几次才能看到此问题.
因此,似乎在事件触发,传播或捕获过程中存在滞后.知道这里发生了什么吗？
我也尝试了div和span标签,并得到相同的结果.
解决方法:
因此,我刚刚检查了您的问题,发生的是,您将li移到了右ul上方,但又将li移到了右ul的外面,它又回到了右一个,而不是左一个,但是由于您没有将其放入正确的ul中,因此未触发drop事件.
查看以下(未解答)类似问题的问题：https://*.com/questions/7775769/sortable-and-droppable-issue-returning-to-original-sortable-list
您可以通过以下两种方法来解决此问题：在创建sortable时删除connectWith选项并继续使用droppables,或者保留connectWith并使用sortable中的receive事件：
$( function() {
// make the two list boxes sortable
$( '#source, #destination' ).sortable({
connectWith: $( 'ul' )
});
// when an item is dropped on destination list box (right one),
// a checkbox is added to it
$( '#destination' ).bind("sortreceive", function( e, ui ) {
var label = $( ui.item[0] ).text();
console.log( label + ' dropped to destination list box' );
$( ui.item[0] ).remove();
$( this ).append( '<li><label><input name="categories[]" type="checkbox" /> '+ label +'</label></li>');
});
// when an item is dropped on the source list box (left one),
// the checkbox is remove
$( '#source' ).bind("sortreceive", function( e, ui ) {
var label = $( ui.item[0] ).text();
$( ui.item ).remove();
$( this ).append( '<li>' + label + '</li>' );
});
});