欲張りのドロップ可能で一度だけドロップ可能なドラッグ可能

Question

私は、スクリーン上で互いに非常に近い2つのドロップ可能なdivを持っています（これらはネストされていません）。大きなdraggable divが2つのdivの上にドラッグされます。マウスが離されると、ドラッグ可能な部分はとなり、両方とものドロップ可能なdivになります（つまり、2つのドロップ可能なイベントが発生します）。

このシナリオでは、ドローラブルはになります。はドローパブルとノート以外です。順序は全く問題ではありません。

これを実行する最善の方法は何ですか？

非効率的な方法は、すべての削除可能なイベントのタイムスタンプを追跡し、タイムスタンプがすでに配列に格納されている場合は削除可能なイベントを拒否することです。

Answer 1

少し違った方法で問題を解決することができました。私の状況が再び何であるかを私に最初のおさらいをしてみましょう：

1. 私は一意のIDを持っていないドラッグのdivを、持っている画面
2. 上で互いに非常に接近している2つのドロップ可能のdivオブジェクトを持っています。このdraggableは私のdroppablesの時間と時間をもう一度落とすことができます（つまり、意味があれば消費されません）
3. draggableが2つのdroppablesの上にある場合、現在jqueryの動作は、両方のdroppables。これは私にとって望ましくない効果です。

4. 私の予想される動作：draggableは最初のdroppableのみになるはずです。周りの他の後続のdroppableに対してトリガーされるべきではありません。

   var tsArray = new Array（）;

   $（ 'ドロップ可能。'）ドロップ可能。（{ ドロップ：関数（）{

   for (var i = 0; i < tsArray.length; i++) { 
       if (tsArray[i] + 150 > ev.timeStamp) { 
        return; 
       } 
   } 
   
   tsArray.length = 0; // Empty it for performance 
   tsArray.push(ev.timeStamp); 
   
   // Do any logic you require here 
   

   }）。

基本的な考え方は、ドラッグ可能な2つのdroppablesにドロップされたとき、各ドロップ可能なイベントのイベントタイムスタンプは互いに非常に接近しているということです。ミリ秒間隔です。私は、単にそれらの間に大きな時間差があることを確認するためのチェックを行います。

Answer 2

droppable要素の 'data'メソッドを使用して、今まで受け入れたdraggablesへの参照を格納できます。だから、例えば、あなたがこのような何か行うことができます。基本的にこれが何をしているか

<script language="javascript"> 
$(function() { 
    $('.droppable').droppable({ 
     greedy:true, 
     [...other:options], 
     over: function(event,ui) { 
      var already_dragged = $(this).data('mysite.dropped_items'); 
      if($.inArray(ui.draggable.id,already_dragged) >= 0) { 
       $(this).droppable('disable'); 
      } 
     }, 
     out: function(event,ui) { 
      $(this).droppable('enable'); 
     }, 
     drop: function(event,ui) { 
      var already_dragged = $(this).data('mysite.dropped_items'); 
      if($.inArray(ui.draggable.id,already_dragged) < 0) { 
       already_dragged.push(ui.draggable.id); 
       $(this).data('mysite.dropped_items',already_dragged); 
      } 
     } 
    }).data('mysite.dropped_items',new Array()); 
}); 
</script> 

<div id="droppable1" class="droppable"></div> 
<div id="droppable2" class="droppable"></div> 
<div id="draggable_1" class="draggable"></div> 

をこれです...

私たちは、「個人用サイトと呼ばれる配列を添付するjQueryのデータ・オブジェクトを使用しました.dropped_items 'を各$（'。droppable '）要素に追加します。これらのdroppablesの1つ上にdraggableを置くたびに、システムはそのdroppableのidがすでに 'mysite.dropped_items'配列に入っているかどうかをチェックします。そうであれば、ドロップブルは無効になります。そうでない場合は、すべてが期待通りに機能します。

私はこの正確なコードブロックをテストしていませんが、理論的にはうまくいくはずです。私はそれが助けて欲しい

Answer 3

他のドロップブルを無効にするには、単にあなたのOVER、OUTイベントをドロップ可能に指定するだけで済みます。

likeそう言いますと、drop1とdrop2はDOM上では無関係ですが、お互いに重なり合っており、ドラッグ1をドロップします。あなたはdrop1のOVER、OUT、関数にアクセスすることができます（これが優先される場合）.OVER：無効なdrop2、OUT：enable drop2

疑似コードですが、それはjqueryで動作します。