내 경우에 div 충돌을 감지하는 방법은 무엇입니까?

Question

사용자가 마우스를 끌 때 div 충돌을 감지하고 싶습니다.

내가 보여주고 싶은

<div id='drag-item'/> 
    <img src='drag' /> 
</div> 
<img id='img1' src='img1.png'/> 
<img id='img2' src='img21.png'/> 
<img id='img3' src='img3.png'/> 
<img id='img4' src='img4.png'/> 
<img id='img5' src='img5.png'/> 

    var objects = { 
        'img1': {'offset':330..other property...}, 
        'img2': {'offset':-450,other property...}, 
        'img3': {'offset' : 100,other property...} , 
        'img4': {'offset' : 430,other property...}, 
        'img5': {'offset' :-260,other property...} 
       } 

JS

$('#drag-item').draggable(
      drag: function(){ 
        var p = $('#drag-item').offset(); 

        for(var i in objects){ 
         var t = $('#' + i).position() 
         var hei = $('#' + i).height() + p.top; 

         if(p.top >= t.top && p.top <= hei){ 
          console.log('hit the object') 
         } 
        } 
      } 
    ) 

처럼 뭔가 사업부가 끌 때 '객체를 히트'이미지 중 하나를 공격하지만 난 수없는 것이 충돌을 감지합니다. 아무도 그것에 대해 나를 도울 수 있습니까? 모든

Answer 1

충돌이 있습니다. 드래그 객체 감지 :

$('#drag-item').draggable({ 
    drag: function (event, ui) { 
     var height = ui.helper.height(); 
     var divs = $('div.img').not($(this).children()); 

     var pos = ui.position; 

     divs.each(function (index, value) { 
      var t = $(this).position(); 
      var hei = $(this).height() 

      if (t.top <= pos.top + height) { // check for top collision 
       if (pos.left <= t.left + $(this).width()) { // check for side collision 
        console.log('hit the object'); 
       } 
      } 
     }); 
    } 
}); 

그리고 Demo

Answer 2

첫째로 살펴 :
Please recommend a JQuery plugin that handles collision detection for draggable elements

하지만 당신은 스스로를 구현하려는 경우, 당신은 축 정리를 분리 조회 할 수 있습니다
Hyperplane separation theorem

은 또한 당신이 사용할 수있는 다음 링크로 jQuery 용 자바 스크립트 게임 엔진 :
Javascript game engine for jQuery