jQuery UI droppable’drop’事件等待恢复

我正在开发一些与jQueryUI的简单拖放交互。 在某些情况下，我希望拖动的项目回到原来的位置（ 恢复 ），然后摇动。 我把震动放在droppable对象的drop事件中，但它似乎没有等待恢复完成。

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

在draggable完成其恢复 后 ，有没有办法执行droppable对象的drop事件？

请参阅此JSFiddle以获取示例： http ： //jsfiddle.net/sbQUE/

换句话说，如果我按如下方式设置droppable：

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

…执行的function是：

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

…并且落在droppable上的可拖动对象设置如下：

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

由于恢复选项，如何确保在draggable返回原始位置后执行“someFunction”回调？

注意：我尝试在revert回调或事件之后寻找某种类型，但它不存在（至少在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（）将一直等到执行完毕。