Çarpışmayı çoklu dize üst üste yerleştirme

Question

Projem için çok sayıda div çarpışma algılamayı istiyorum.

bakınız aşağıda resmi:

1. Kırmızı kutu ve siyah sınırında

nasıl algılamak bir div

Kırmızı kutu hareketli olduğu ise etrafında kırmızı kutu dokunmatik bir sınır?

Ben kanvasla çözüm çalıştı ama benim için iyi bir yol değildir.

Answer 1

bulmak için bir çok şey var, bu hareketli div verilen div kesişme alanında olduğu durumlar için çalışıyor gibi görünüyor.

hareketli div id #draggable ile gösterilir. Kavşak için kullanılan diğer tüm div'ler data-category="container" özniteliğiyle seçilir.

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"); 
    }); 

Aşağıda bu komut verilen html için çalıştırıldığında benziyor nasıl.

Eğer JQueryUI kullanıyorsanız, belki şöyle containment seçeneğini kullanarak sürüklenebilir nesnenin dokanak ayarlayabilirsiniz.

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

Answer 2

ben Element.getBoundingClientRect (documentation here) dayalı bir çözüm öneririm. top, bottom, left, right, width ve height: Bu yöntem, 6 özelliklere sahip bir nesne döndürür. belgeleriniz kapladığı alanları bulmak için bu yöntemi kullanabilirsiniz.

İkincisi, iki alanı örtüşüyorsa kontrol eden bir yöntem oluşturmanız gerekir:

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

Eğer kırmızı dikdörtgen depolamış ve bir dizideki tüm siyah bordürlü div'ler kontrol edebilirsiniz Bir kez dikdörtgenler hangi şöyle çakışıyor: overlappingRects dizinin uzunluğu artık orada üst üste kaç anlatır

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

.

doğru unsurlar seçerek veya örtüşme yöntemi yazma yardıma ihtiyacınız varsa bana bildirin. Ama bu kesin çözüm olmasa da ... Zaten bu konular hakkında İnternet'teki