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事件。我不明白为什么 - 我没有放弃它。

我在这个小提琴中复制了它：http://jsfiddle.net/9ydp3L7q/3/

由于

Answer 1

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

如果帮助者有ui-sortable-helper（当它在可排序的时候得到它），我会忽略drop。

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

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

但是我必须在sortable上手动删除该类。如果我试图删除我进入的类并且无限循环（以及页面崩溃时的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/

Answer 2

在使用draggable时使用disable进行排序。使用sortable时使用disable for draggable。

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

或

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

当draggable离开嵌套sortable时调用Drop

2 个答案: