2

jQueryUI を使用した簡単なドラッグ アンド ドロップ操作を開発しています。条件によっては、ドラッグしたアイテムを元の場所に戻して ( revert ) 振ってみたいと思います。ドロップ可能なオブジェクトのドロップ イベントにシェイクを配置しましたが、復帰が完了するのを待っていないようです。

しかも、元の位置に戻る前に揺れたり、元に戻した後に揺れたり、途中で揺れに巻き込まれたり。一貫性がありません。

ドラッグ可能なオブジェクトの復帰が完了した後に、ドロップ可能なオブジェクトのドロップイベントを実行する方法はありますか?

例については、このJSFiddleを参照してください: http://jsfiddle.net/sbQUE/

つまり、次のようにドロップ可能を設定した場合:

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」コールバックが実行されるようにするにはどうすればよいですか?

注:何らかの種類の after revert コールバックまたはイベントを探してみましたが、存在しません (少なくとも jQueryUI のドキュメントにはありません)。

4

1 に答える 1

3

例として jsfiddle を作成できる場合は、これをコードに適用できますが、通常、これは system of 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() は実行されるまで待機します。

于 2013-08-19T14:24:37.497 に答える