2011-08-19 55 views
11

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

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

有沒有人有任何建議?

回答

10

您可以通過調用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"; 
    } 
} 

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

+0

嘿謝謝你的答案!儘管Im努力讓它起作用 - 測試(canDropThatVideo)需要找到它在列表中的位置,以便它可以與相鄰的視頻進行比較。我嘗試了這樣的: // get adjacent vids var nextVid = $(ui.item).next(); var prevVid = $(ui.item).prev(); 但這些似乎沒有得到正確的 - 可能是因爲它在開始事件......應該這樣工作嗎? – lopsided

+0

@ user612911,它更復雜,但它可以工作。你必須綁定到'sort'事件而不是'start'並分別使用'ui.placeholder.next()'和'ui.placeholder.prev()'。你也可能不得不記得你以某種方式做出關於該項目的決定(也許用'data()'),以便'stop'處理程序知道該做什麼。 (順便說一句,你不需要在'ui'成員上調用'$()':它們已經是jQuery對象。) –

+0

好,我現在工作的很好。我還將一些邏輯附加到可拖動的'start'事件中,以將一些'cantDropHere'類添加到不是有效的拖放空間的元素,然後從可排序的元素中排除這些類。謝謝! – lopsided

3

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

.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事件兩種方式。