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

Sortable drop handler not being called if you drag and drop too quickly

本文关键字：拖放 排序 处理 程序 调用 如果      更新时间：2023-09-26

JSFiddle源

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

要测试它，请正常地将项目从左侧的列表框拖动到右侧的列表框中。您将看到一个复选框已添加到项目中。此外，还会向控制台输出日志。

但是，如果快速拖放，则不会看到复选框和日志。您可能需要尝试几次才能发现问题。

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

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

所以我刚刚检查了你的问题，发生的事情是你将li移动到右ul上，但你将li放在了右ul之外，它又回到了右ul而不是左ul，但由于你没有将其放在右ul内，所以不会触发drop事件。

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

有两个选项可以解决这个问题：在创建可排序项时删除connectWith选项并继续使用droptables，或者保留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>' );
    });
});​
相关文章：