Question

JSFiddle Source

如果您将项目从源列表框拖放到目标列表框非常快，则不会触发放置处理程序。

我已在FF 10，Chrome 17和IE 9中测试过相同的结果。

要测试它，请将项目从左侧的列表框拖动到右侧的项目。一旦删除，您将看到该项目已添加了一个复选框。此外，日志输出到控制台。

但如果你拖得很快，你就不会看到复选框和日志。您可能需要尝试几次才能看到问题。

看起来在射击，传播或捕捉过程中存在滞后现象。知道这里发生了什么吗？

我已经尝试使用div和span标记，并获得相同的结果。

Answer 1

所以我刚刚检查了你的问题，发生了什么事情，你正在把李移到右边的ul上，但是你把li放在右边的ul之外，它又回到右边的而不是左边的那个，但由于你没有将它放在右边的ul里，因此不会触发drop事件。

针对类似问题查看以下（未答复）问题：https://stackoverflow.com/questions/7775769/sortable-and-droppable-issue-returning-to-original-sortable-list

您有两种方法可以解决此问题：在创建sortables时删除connectWith选项并继续使用droppables，或者保持connectWith并使用可排序的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>' );
    });
});

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

1 个答案: