jQuery UI droppable'drop'事件等待恢復

Question

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

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

有沒有辦法執行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的文檔中）。

Answer 1

如果你可以的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（）將等待直到它被執行。