我有一個可排序的視頻列表和一組可拖動的視頻。基本上我想確保拖入的視頻不在視頻的前5分鐘內。由於視頻長度的變化,我想測試下降 - 加起來的時間,如果不是5分鐘恢復並顯示錯誤。jQuery Draggable +可排序 - 如何拒絕排序的下降?
我試圖掛鉤到所有的回調拖動和排序(包括無證復歸回調)做我的測試,但無論我試試,DOM始終得到改變(和排序調用其更新回調)...
有沒有人有任何建議?
我有一個可排序的視頻列表和一組可拖動的視頻。基本上我想確保拖入的視頻不在視頻的前5分鐘內。由於視頻長度的變化,我想測試下降 - 加起來的時間,如果不是5分鐘恢復並顯示錯誤。jQuery Draggable +可排序 - 如何拒絕排序的下降?
我試圖掛鉤到所有的回調拖動和排序(包括無證復歸回調)做我的測試,但無論我試試,DOM始終得到改變(和排序調用其更新回調)...
有沒有人有任何建議?
您可以通過調用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";
}
}
未捕獲的異常但仍然會出現在控制檯中。
我找到了一種不同的方式。如果你不沒有它漂浮回到它的動畫心中是原來的地方,你可以隨時使用這個
.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事件兩種方式。
嘿謝謝你的答案!儘管Im努力讓它起作用 - 測試(canDropThatVideo)需要找到它在列表中的位置,以便它可以與相鄰的視頻進行比較。我嘗試了這樣的: // get adjacent vids var nextVid = $(ui.item).next(); var prevVid = $(ui.item).prev(); 但這些似乎沒有得到正確的 - 可能是因爲它在開始事件......應該這樣工作嗎? – lopsided
@ user612911,它更復雜,但它可以工作。你必須綁定到'sort'事件而不是'start'並分別使用'ui.placeholder.next()'和'ui.placeholder.prev()'。你也可能不得不記得你以某種方式做出關於該項目的決定(也許用'data()'),以便'stop'處理程序知道該做什麼。 (順便說一句,你不需要在'ui'成員上調用'$()':它們已經是jQuery對象。) –
好,我現在工作的很好。我還將一些邏輯附加到可拖動的'start'事件中,以將一些'cantDropHere'類添加到不是有效的拖放空間的元素,然後從可排序的元素中排除這些類。謝謝! – lopsided