Событие droppable пользовательского интерфейса jQuery для ожидания возврата

Я разрабатываю несколько простых взаимодействий перетаскивания с помощью jQueryUI. При некоторых условиях я хотел бы, чтобы перетаскиваемый элемент возвращался на исходное место (revert) а потом встряхнуть. Я поместил шейк в событие перетаскивания выпадающего объект, но, похоже, он не ждет завершения возврата.

Что еще хуже, иногда он трясется до начала возврата в исходное положение, в других случаях он трясется после полного возврата, а в других случаях дрожание прерывается. середина. Это непоследовательно.

Есть ли способ выполнить событие drop сбрасываемого объекта after< /strong> перетаскиваемый объект завершил возврат?

См. этот 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).


javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable
person alemangui    schedule 19.08.2013    source источник
comment
У вас есть jsfiddle для этого примера?   -  person Shaunak    schedule 19.08.2013
comment
Хорошая идея, я внесу изменения, чтобы добавить один сейчас   -  person alemangui    schedule 19.08.2013

Ответы (1)


arrow_upward
2
arrow_downward

Если вы можете сделать jsfiddle для своего примера, я могу применить это к вашему коду, но обычно это можно сделать в 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

Если вас интересует setTimeout перед .promise(), чтобы убедиться, что анимация возврата активирована. Затем обещание () будет ждать, пока оно не будет выполнено.

person Shaunak    schedule 19.08.2013
comment
Это звучит как отличное решение... Я пробую его в JSFiddle. - person alemangui; 19.08.2013
comment
неважно .. Я решил это. Добавление jsfiddle для ответа сейчас :) - person Shaunak; 19.08.2013
comment
Работает как шарм с setTimeout! Большое спасибо :). - person alemangui; 19.08.2013