檢測碰撞爲多格疊加

我想爲我的項目，檢測碰撞爲多個div。檢測碰撞爲多格疊加

請參見下圖：

箱紅色和黑色的邊框是div
紅色框移動

如何檢測，如果周圍的紅色框觸摸一個邊界？

我用帆布試過解決方案，但對我來說不是一個好方法。

來源

2016-04-12 P. Frank

雖然這不是確切的解決方案，但它似乎適用於可移動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" });

來源

2016-04-12 12:24:10

哇，你的解決方案非常好。謝謝。現在我可以如何讓圓形div做同樣的事情？請看我的更新 –

Ozgur基本上爲你做了所有的工作，現在你要求他做更多的事情......我建議試着首先理解事情的進展。如果它們的質心之間的距離小於其添加的半徑，則兩個圓形重疊。 – user3297291

我建議根據Element.getBoundingClientRect（documentation here）的解決方案。此方法返回具有6個屬性的對象：top，bottom，left，right,width和height。您可以使用此方法查找您的<div>正在覆蓋的區域。

其次，你必須創建一個檢查，如果兩個區域重疊的方法：

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

一旦你有你的紅色矩形存儲在陣列中的所有黑色邊框的div的，你可以檢查你的方形的重疊像這樣：

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

overlappingRects數組的長度現在告訴你有多少重疊。

讓我知道如果您需要幫助選擇正確的元素或編寫重疊方法。但是在網上有很多關於這些主題的信息......

來源

2016-04-12 11:24:52 user3297291

檢測碰撞爲多格疊加

回答

相關問題