jQuery Droppable and Draggable

Question

私は、コンテナ内のボックスをドラッグすることができますし、別の場所で場所を切り替えることができますが、現時点ではバグです。 jQueryのような場所を並べ替えることができますが、私はDroppableに問題があります。 overイベントでは、マウスを押したまま1回だけアクティブになります。

http://jsfiddle.net/44SAh/

これは私がこれまでのところ、マウスの左ボタンを手放すことなく、再度バックアップし、別の1つの上のボックスを下にドラッグして、試してみることです。それは不具合が始まる。 overイベントは1回のクリックで1回のみアクティブになるためですこの問題を回避する方法はありますか。ボックスを上下にドラッグし、ソート可能な場所などの場所を変更する場合と同じ一貫性を持たせたいと考えています。そして、ソート可能なものは使用できません。なぜなら、ボックスはある程度オーバーラップして自由に移動できる必要があるからです。

Answer 1

ここをクリックしてください。基本的には、何かをドラッグし始めると、その位置がキャッシュされます。次に、あなたがドロップ可能な状態になったら、ドロップ可能位置を開始位置にスワップし、ドラッグ可能な開始位置を更新し、基になるドロップ可能なデータ構造を更新してオフセットとして修正します。ここjsfiddleです：http://jsfiddle.net/fordlover49/BwvK4/

$(function() { 
    $(".ui-widget-content").draggable({ 
     grid: [5, 5], 
     start: function(event, ui) { 
      // cache the position we were at when we started dragging. 
      $(this).data("startPos", ui.position); 
     }, 
     stack: ".ui-widget-content" 
    }); 

    $(".ui-widget-content").droppable({ 
     tolerance: 'intersect', 
     over: function(event, ui) {    
      var offset = $(ui.draggable).data("startPos"); 
      // update draggable's cached position to what the droppable was 
      $(ui.draggable).data("startPos", { 
       top: $(this).position().top, 
       left: offset.left}); 

      // swap droppable positions with dragging's original pos. 
      $(this).css("top", offset.top); 

      // clear the over events, and update the droppable's offset. 
      $(this).data("droppable").isout = 1; 
      $(this).data("droppable").isover = 0;    
      $(this).data("droppable").offset = $(this).offset(); 
     } 
    }); 
});