jqueryのドラッグ可能なオブジェクトのキャンセルまたはリセット

Question

マップ/ divにドラッグできるオブジェクトのページをロードしたいのですが、クリア/アンドゥボタンが必要ですか？これはjqueryで可能ですか？

あなたは

jQuery UI droppables - changing the image that's dropped

Answer 1

これは（、結局、すべてのjQueryUIがやっている場合）.animate()への単純な呼び出しで可能であり、いくつかのロジックはを追跡するために、前の質問でコードを見ることができますドラッグしている要素の元の位置です（jQueryUIはすでに部分的に処理しています）。

1. .data()を使用して、ドラッグ可能な要素の元の位置とあなたdroppableオブジェクトの.drop()イベントを追跡します：

   $("#drop").droppable({ 
       drop: function(event, ui) { 
        if (!ui.draggable.data("originalPosition")) { 
         ui.draggable.data("originalPosition", 
          ui.draggable.data("draggable").originalPosition); 
        } 
       } 
   }); 
   

   基本的にこれはただドラッグされた要素の「originalPosition」と呼ばれるデータを設定します。これは、有効なドロップゾーン内で要素をドラッグし続けることができることを前提としているため、ドラッグしたまま元の位置に上書きすることはありません。

2. あなたはそれを呼び出す関数を作成しますが元の位置にドラッグされたオブジェクトをアニメーション化：

   function revertDraggable($selector) { 
       $selector.each(function() { 
        var $this = $(this), 
         position = $this.data("originalPosition"); 
   
        if (position) { 
         $this.animate({ 
          left: position.left, 
          top: position.top 
         }, 500, function() { 
          $this.data("originalPosition", null); 
         }); 
        } 
       }); 
   } 
   

   は、あなたの好みに合わせてアニメーションの速度を調整します。イベントハンドラから機能

3. コール：

   $("#undo").click(function() { 
       revertDraggable($(".drag")); 
   }); 
   

はここで働い例です：ドロップされた要素のすべてが、クラスのいくつかの並べ替えを持っていると仮定するとhttp://jsfiddle.net/v7N6w/