jQuery UI droppable'drop'事件以等待还原

Question

我正在开发与jQueryUI的一些简单的拖放式交互。 在某些情况下，我希望拖动的项目回到其原始位置（ 还原 ），然后摇动。 我将抖动放在了droppable对象的drop事件中，但是它似乎并不等待还原完成。

更糟糕的是，有时在开始还原到原始位置之前会摇晃，有时在完全还原完成后摇晃，有时在中间陷入摇晃。 这是不一致的。

在可拖动对象完成其还原 之后 ，有什么方法可以执行可放置对象的放置事件？

有关示例，请参见此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
});

如何通过revert选项确保可拖动对象返回其原始位置后，将执行“ someFunction”回调？

注意：我试图在恢复回调或事件之后寻找某种形式，但它不存在（至少在jQueryUI的文档中不存在）。

Answer 1

如果可以为您制作jsfiddle示例，我可以将其应用于您的代码，但通常可以使用promise系统在jQuery中完成：

您将必须执行以下操作：

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

如果您想知道.promise（）之前的setTimeout，以确保已激活还原动画。 然后promise（）将等待执行。