当 draggable 离开嵌套的 sortable 时调用 Drop

Question

我有 Droppable div，带有嵌套的 Sortable 和 Draggable，它连接到 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"
});

我的问题是，当我将 Draggable 拖到 Sortable 上时，会触发 drop 事件。我不明白为什么 - 我没有放弃它。

我转载于此fiddle：http://jsfiddle.net/9ydp3L7q/3/

谢谢

Answer 1

使用 disable 可排序，同时使用可拖动。并在使用 sortable 时对 draggable 使用 disable。

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

或

$('.selector').draggable({
    disabled: false
});
$(".selector").sortable({
      disabled: false
});

Answer 2

我找到了一个肮脏的解决方法。我真的不喜欢它，但它似乎工作正常。

如果助手有 ui-sortable-helper（当它超过 sortable 时它会得到），我会忽略 drop。

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

        console.log('Dropped');
    }
});

但我必须手动删除可排序的 class。如果我尝试只删除 class 我会进入并无限循环（并且 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);
    }
});

已修复 fiddle：http://jsfiddle.net/9ydp3L7q/6/

当 draggable 离开嵌套的 sortable 时调用 Drop

Drop is called when draggable is leaving nested sortable

javascript

jquery

jquery-ui