Question

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

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

在拖拉机完成其drop之后，有没有办法执行可放置对象的revert事件？

有关示例，请参阅此 JSFiddle ：http://jsfiddle.net/sbQUE/

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

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

...执行的功能是：

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（）将一直等到执行完毕。

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

1 个答案: