複数のdivスーパーインポーズへの衝突を検出します

Question

私は自分のプロジェクトで複数の衝突を検出したいdiv

参照してください下の画像：

1. レッドボックスと黒の境界線は

がどのように検出div

レッドボックスは移動可能であるならば、その周りに赤いボックスタッチ1つの境界？

私はキャンバスで解決しようとしましたが、私にとっては良い方法ではありません。

Answer 1

これは正確な解決策ではありませんが、可動divが特定のdivの交差領域にある場合に有効です。

可動divはID #draggableで示されます。交差のために使用される他のすべてのdivは、data-category="container"属性で選択されます。

HTML

<div data-category="container" style="width:200px;height:200px;border:3px solid #000; position:absolute;top:10;left:10"></div> 
<div data-category="container" style="width:500px;height:300px;border:3px solid #000; position:absolute;top:100;left:100"></div> 
<div data-category="container" style="width:400px;height:400px;border:3px solid #000; position:absolute;top:130;left:50"></div> 
<div id="draggable" style="height:20px;width:30px;background-color:red;position:absolute;top:160;left:130"></div> 

SCRIPT以下

var minTop = Number.MAX_VALUE; 
    var posTop, posLeft = 0; 
    var minBottom = Number.MAX_VALUE; 
    var minLeft = Number.MAX_VALUE; 
    var minRight = Number.MAX_VALUE; 

    $(document).ready(function() 
    { 
     //loop through intersection divs 
     $('div[data-category=container]').each(function(){ 
     var diffTop = $('#draggable').offset().top - $(this).offset().top; //get distance between tops 
     var diffLeft = $('#draggable').offset().left - $(this).offset().left; //get distance between lefts 
     var diffBottom = ($(this).offset().top + $(this).height()) - ($('#draggable').offset().top + $('#draggable').height()); //get distance between bottoms 
     var diffRight = ($(this).offset().left + $(this).width()) - ($('#draggable').offset().left + $('#draggable').width()); //get distance between rights 

     //store min top 
     if (diffTop > 0 && diffTop < minTop) 
     { 
      minTop = diffTop; 
      posTop = $(this).offset().top; 
     } 

     //store min left 
     if (diffLeft > 0 && diffLeft < minLeft) 
     { 
      minLeft = diffLeft; 
      posLeft = $(this).offset().left; 
     } 

     //store min bottom 
     if (diffBottom > 0 && diffBottom < minBottom) 
     { 
      minBottom = diffBottom; 
     } 

     //store min right 
     if (diffRight > 0 && diffRight < minRight) 
     { 
      minRight = diffRight; 
     }   
     }); 

     //create div within the intersection area 
     $("<div id = '#divFrame' style='border:3px solid blue;position:absolute;top:" + (posTop) + ";left:" + (posLeft) + ";width:" + (minLeft + minRight + $('#draggable').width()) + "px;height:" + (minTop + minBottom + $('#draggable').height()) + "px;'></div>").appendTo("body"); 
    }); 

は、スクリプトが与えられたhtmlのために実行されたときに、それがどのように見えるかです。

あなたがJQueryUIを使用している場合は、多分あなたは、次のようにcontainmentオプションを使用して、ドラッグ可能なオブジェクトのboundriesを設定することができます。

$("#draggable").draggable({ containment: "#divFrame" }); 

Answer 2

私はElement.getBoundingClientRect（documentation here）に基づいたソリューションをお勧めしたいです。このメソッドは、top,bottom,left,right,およびheightの6つのプロパティを持つオブジェクトを返します。この方法を使用して<div>がカバーしている領域を見つけることができます。

第二に、次の2つの領域が重なるかどうかを確認する方法を作成する必要があります：

var rectanglesOverlap = function(rec1, rec2) { 
    // Return true if overlap, false if none 
} 

あなたは赤い長方形が保存されていると、アレイ内のすべての黒のボーダーのdivは、次のことが確認できたら、あなたの長方形のどのそのように重なっ：

var overlappingRects = blackRects.filter(rectanglesOverlap.bind(null, redRect); 

overlappingRects配列の長さは、今そこにあるどのように多くの重複を示しています。

正しい要素を選択したり、オーバーラップ方法を書いたりする手助けが必要な場合は教えてください。しかし、これらのトピックについて既にオンラインで見つけ出すことはたくさんあります。