2

我正在使用 jQueryUI 开发一些简单的拖放交互。在某些情况下，我希望拖动的项目回到原来的位置（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
});

由于 revert 选项，我如何确保在可拖动对象回到其原始位置后执行“someFunction”回调？

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

4

1 回答 1

3

如果您可以为您的示例制作 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

万一您想知道 .promise() 之前的 setTimeout 是为了确保已激活还原动画。然后 promise() 将等待直到它被执行。

于 2013-08-19T14:24:37.497 回答