jQuery UI droppable' drop'等待还原的事件 [英] jQuery UI droppable 'drop' event to wait for revert

问题描述

我正在开发与jQueryUI的一些简单的拖放式交互.在某些情况下，我希望将拖动的项目返回到其原始位置(还原)，然后摇动.我将 shake 放在了droppable的 drop事件中对象，但似乎没有等待还原完成.

I am developing some simple drag-drop interactions with jQueryUI. Under some conditions, I would like the dragged item to go back to its original place (revert) and then shake. I placed the shake in the drop event of the droppable object, but it doesn't seem to wait for the revert to be finished.

更糟糕的是，有时它会在之前开始恢复到原始位置时晃动，有时它会在完全还原完成后在之后晃动，而其他时候则发生晃动陷入中间.这是不一致的.

What's worse, sometimes it shakes before starting to revert to the original position, other times it shakes after the full revert has been done, and other times the shake gets caught up in the middle. It's not consistent.

有什么方法可以执行可放置对象 drop 事件> 之后，可拖动对象已完成其还原?

Is there any way to execute the drop event of the droppable object after the draggable has completed its revert?

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

换句话说，如果我将可放置对象设置如下:

In other words, if I set up the droppable as follows:

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

...执行的功能是:

...the executed function is:

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

...，然后将放置在可放置对象上的可拖动对象设置为:

... and the draggable object that will fall on the droppable is set up like:

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

由于revert选项，如何确保可拖动对象返回其原始位置后将执行"someFunction"回调?

How can I make sure the "someFunction" callback will be executed after the draggable is back in its original place thanks to the revert option?

注意::我尝试在恢复回调或事件后寻找某种形式，但它不存在(至少在jQueryUI的文档中不存在).

Note: I tried looking for some sort of after revert callback or event but it doesn't exist (at least not in jQueryUI's documentation).

推荐答案

如果可以为您创建jsfiddle，则可以将其应用于您的代码，但是通常可以使用承诺:

If you can make jsfiddle for you example, I can apply this to your code, but generally this can be accomplished in jquery using system of promise:

您将必须执行以下操作:

You will have to do something like this:

javascript:

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

Here is a solved jsfiddle

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

Incase you are wondering about the setTimeout before .promise() that is to make sure the revert animation has been activated. Then promise() will wait until it is executed.

这篇关于jQuery UI droppable' drop'等待还原的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！