jQuery Draggable +可排序 - 如何拒絕排序的下降？

Question

我有一個可排序的視頻列表和一組可拖動的視頻。基本上我想確保拖入的視頻不在視頻的前5分鐘內。由於視頻長度的變化，我想測試下降 - 加起來的時間，如果不是5分鐘恢復並顯示錯誤。

我試圖掛鉤到所有的回調拖動和排序（包括無證復歸回調）做我的測試，但無論我試試，DOM始終得到改變（和排序調用其更新回調）...

有沒有人有任何建議？

Answer 1

您可以通過調用draggable小部件的cancel方法來恢復拖動操作（該方法沒有記錄，但其名稱不以下劃線開頭，這可以證明它可靠地使用「更安全」）。它只在start事件中才起作用，但是，由於其他事件發生得太晚而不能觸發恢復動畫。

然而，sortable部件仍然會記錄即使拖動操作被取消的下降，所以你也必須刪除新添加的項目（stop活動期間，爲start事件發生得太早）：

$("#yourSortable").sortable({ 
    start: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.sender.draggable("cancel"); 
     } 
    }, 
    stop: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.item.remove(); 
      // Show an error... 
     } 
    } 
}); 

您可以在this fiddle中看到結果（第四項將始終恢復）。

更新：正如約翰Kurlak理應在評論中指出，該項目不會因爲調用draggable("cancel")的恢復，但由於ui.sender是在我們的例子null。投擲任何東西都會導致相同的行爲。

唉，所有的其他組合我想結果在項目沒有動畫發生正在恢復，所以也許我們最好的辦法是避免訪問ui.sender，而是寫類似：

start: function(event, ui) { 
    if (!canDropThatVideo(ui.item)) { 
     throw "cancel"; 
    } 
} 

未捕獲的異常但仍然會出現在控制檯中。

Answer 2

我找到了一種不同的方式。如果你不沒有它漂浮回到它的動畫心中是原來的地方，你可以隨時使用這個

.droppable({ 
    drop: function (event, ui) { 

     var canDrop = false; 

     //if you need more calculations for 
     //validation, like me, put them here 

     if (/*your validation here*/) 
      canDrop = true; 

     if (!canDrop) { 
      ui.draggable.remove(); 
     } 
     else{ 
      //you can put whatever else you need here 
      //in case you needed the drop anyway 
     } 
    } 
}).sortable({ 
    //your choice of sortable options 
}); 

我用這個，因爲我需要drop事件兩種方式。