當可拖動離開嵌套可排序時調用拖放

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