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

JSFiddle Source

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

我已经在FF 10,Chrome 17和IE 9中测试了相同的结果.

要对其进行测试,通常将其从左侧的列表框中拖到右侧的一个框中.一旦删除,您将看到一个复选框已添加到该项目.另外,日志输出到控制台.

但是,如果您真正快速地拖放,则不会看到复选框或日志.您可能需要尝试几次才能看到此问题.

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

我也尝试了div和span标签,并得到相同的结果.

解决方法:

因此,我刚刚检查了您的问题,发生的是,您将li移到了右ul上方,但又将li移到了右ul的外面,它又回到了右一个,而不是左一个,但是由于您没有将其放入正确的ul中,因此未触发drop事件.

查看以下(未解答)类似问题的问题：https://stackoverflow.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>' );
    });
});​

标签：jquery-ui,javascript-events,events,javascript,jquery
来源： https://codeday.me/bug/20191201/2082168.html