拖放将在拖放离开嵌套排序时调用。

Question

我有可删除的div与嵌套的可排序和可拖动，这是连接到可排序，并被接受的可下降。

<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"
});

我的问题是，当我拖动可拖动的可排序时，就会触发drop事件。我不明白为什么-我没掉下来。

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

谢谢

Answer 1

我找到了一个肮脏的解决办法。我真的不喜欢它，但它似乎很好用。

如果助手有ui可排序助手(当它通过可排序时得到)，我将忽略drop。

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

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

但我必须手动将类从可排序项中删除。如果我试图删除我进入的类和infinate循环(以及页面崩溃中的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

使用disable表示可排序，而使用拖放。使用可排序时，请使用“禁用可拖”。

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

或

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