当可拖动离开嵌套可排序时调用拖放

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

我的问题是，当我拖动可拖动的在可排序，下降触发事件。我不明白为什么 - 我没有放弃它。同时采用可拖动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'); 
    } 
}); 

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