当draggable使嵌套可排序时调用Drop

Drop is called when draggable is leaving nested sortable

本文关键字：调用 Drop 排序 draggable 嵌套      更新时间：2023-09-26

我有一个带有嵌套的Sortable和Draggable的Droppablediv，它连接到Sortable并被Droppable接受。

<div id="droppable">
    <div id="nested-sortable"></div>
</div>
<div class="draggable">
   test
</div>

jQuery（2.0.2）

$("#droppable").droppable({
    accept: ".draggable",
    drop: function() {
        console.log('Dropped'); //This should be called on drop!!
    }
});
$("#nested-sortable").sortable({
    placeholder: 'item',
});
$(".draggable").draggable({
    connectToSortable: "#nested-sortable",
    helper: "clone"
});

我的问题是，当我将Dragable拖动到Sortable上时，会触发drop事件。我不明白为什么-我还没有把它掉下来。

我用这把小提琴复制了它：http://jsfiddle.net/9ydp3L7q/3/

感谢

我找到了一个肮脏的解决方法。我真的不喜欢它，但它似乎还可以。

如果帮助程序有ui可排序的帮助程序（当它超过可排序时会得到），我会忽略drop。

$("#droppable").droppable({
    accept: ".draggable",
    drop: function(event, ui) {
        if (ui.helper.hasClass("ui-sortable-helper")) {
            return;
        }
        console.log('Dropped');
    }
});

但我必须手动将该类从可排序项中删除。如果我试图删除我进入的类并插入循环（页面上的javascript崩溃），那么我必须在超时时完成。

$("#nested-sortable").sortable({
    placeholder: 'item',
    out: function(event, ui) {
        // this looks kind of dirty to me 
        setTimeout(function () {
            $(ui.helper).removeClass("ui-sortable-helper")
        }, 1);
    }
});

固定小提琴：http://jsfiddle.net/9ydp3L7q/6/

使用disable进行可排序，同时使用可拖动。和在使用可排序时对可拖动使用禁用。

$( ".selector" ).sortable( "disable" );
$( ".selector" ).draggable( "disable" );

或

$('.selector').draggable({
    disabled: false
});
$(".selector").sortable({
      disabled: false
});
相关文章：