javascript - jQuery UI 可删除 'drop' 事件等待恢复

Question

我正在使用 jQueryUI 开发一些简单的拖放交互。在某些情况下，我希望拖动的项目回到原来的位置( revert )然后摇动。我将奶昔放在 drop event 中可删除对象的，但它似乎没有等待恢复完成。

更糟糕的是，有时它在开始恢复到原始位置之前摇晃，有时在完全恢复完成后摇晃，有时摇晃变得越来越严重夹在中间。不一致。

有没有办法执行drop可拖放对象在完成其操作后发生的事件revert ？

请参阅此 JSFiddle 示例:http://jsfiddle.net/sbQUE/

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

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 示例，我可以将其应用到您的代码中，但通常这可以使用 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);
         }
     });
 });

Here is a solved jsfiddle

如果您想知道 .promise() 之前的 setTimeout 是为了确保恢复动画已被激活。然后promise()会等待直到执行。