title: How to detect div collision in my case?
body: <p>I want to detect the div collision when user drag their mouse.</p>
  
  <p>I have something like</p>
  
  <pre><code>&lt;div id='drag-item'/&gt;
      &lt;img src='drag' /&gt;
  &lt;/div&gt;
   &lt;img id='img1' src='img1.png'/&gt;
   &lt;img id='img2' src='img21.png'/&gt;
   &lt;img id='img3'  src='img3.png'/&gt;
   &lt;img id='img4'  src='img4.png'/&gt;
   &lt;img id='img5' src='img5.png'/&gt;
  
    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...}
                   }
  </code></pre>
  
  <p>JS</p>
  
  <pre><code> $('#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 &gt;= t.top &amp;&amp; p.top &lt;= hei ){
                              console.log('hit the object')
                          }
                      }
             }
      )
  </code></pre>
  
  <p>I want to show 'hit the object' when the div is dragged and hit one of the image but I can't seem to detect the collision. Can anyone help me about it?</p>