1

我正在開發一些簡單的jQueryUI拖放交互。在某些情況下,我希望被拖動的物品回到原來的位置(revert),然後搖晃。我把放在可丟棄對象的drop event,但它似乎沒有等待恢復完成。jQuery UI droppable'drop'事件等待恢復

更糟的是,有時甩頭之前開始恢復到原來的位置,其抖動後全面復歸已經完成,其他時間的抖動被夾在中間了其他時間。這不一致。

有沒有辦法執行drop事件可丟棄對象可拖動已完成其revert

見本的jsfiddle中的示例:http://jsfiddle.net/sbQUE/

換句話說,如果我設置可投放如下:

this.$el.droppable({ 
    drop: someFunction 
}); 

...所執行功能是:

someFunction: function(ev, el){ 
    $(el.draggable).effect('shake'); 
} 

...和落在可丟棄物上的可拖動對象設置如下:

this.$el.draggable({ 
    revert: true, 
    revertDuration: 0 // or any number for that matter 
}); 

我怎樣才能確保後可拖動回來了它原來的地方由於還原選項中的「someFunction」回調將被執行?

注意:我試圖尋找某種後回調回調或事件,但它不存在(至少不是在jQueryUI的文檔中)。

+0

你有這個例子的jsfiddle嗎? – Shaunak

+0

好主意,我將進行編輯,現在添加一個 – alemangui

回答

2

如果你可以的jsfiddle你比如說,我可以把這個給你的代碼,但是一般情況下可以在jQuery中使用的promise系統來完成:

你將不得不做這樣的事情:

的javascript:

$(function() { 
    $("#draggable").draggable({ 
     revert: "valid" 
    }); 

    $("#droppable").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     drop: function (event, ui) { 
      setTimeout(function() { 
       $("#draggable").promise().done(function() { 
        $("#draggable").effect('shake', {}, 500); 
       }); 
      }, 100); 
     } 
    }); 
}); 

下面是一個解決jsfiddle

因爲你想知道setTimeout之前的.promise()是爲了確保恢復動畫已被激活。然後promise()將等待直到它被執行。

+0

這聽起來像一個很棒的解決方案...我試着在JSFiddle – alemangui

+0

沒關係..我解決了它。添加jsfiddle現在回答:) – Shaunak

+0

像setTimeout一樣的魅力!非常感謝 :)。 – alemangui