javascript - 如果拖放太快，则不会调用可排序的放置处理程序

Question

JSFiddle Source

如果您非常快速地将项目从源列表框拖放到目标列表框，则放置处理程序不会触发。我在 Firefox 10、Chrome 17 和 IE 9 中进行了测试，结果相同。

要测试它，通常将一个项目从左侧的列表框拖到右侧的列表框。一旦放下，您将看到一个复选框已添加到项目中。同时，日志输出到控制台。

但是如果您拖放的速度非常快，您将看不到复选框或日志。您可能需要尝试几次才能看到问题。

所以似乎在事件触发、传播或捕获过程中存在滞后。知道这里发生了什么吗？

我也用 div 和 span 标签试过了，得到了相同的结果。

Answer 1

所以我刚刚检查了你的问题，发生的事情是你将 li 移到右边的 ul 上，但你将 li 放在右边的 ul 外面，它回到右边而不是左边，但由于您没有将其放入正确的 ul 中，因此不会触发 drop 事件。

查看以下(未回答的)问题以了解类似问题:https://stackoverflow.com/questions/7775769/sortable-and-droppable-issue-returning-to-original-sortable-list

您有两种选择来解决此问题:在创建可排序项时删除 connectWith 选项并继续使用可放置项，或者保留 connectWith 并使用来自可排序项的接收事件:

$( 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>' );
    });
});​