How to detect collision between 2 divs?

Question

I am trying to detect if two divs collide each other using query ui

I have something like

<div id='test' >
   <img src='img1.png'/>
  <div id='sensor'></div>
   <img src='img2.png'/>
</div>


<img id='target' src='target.png' />

js

$('#test').draggable();

I need to detect if the sensor div inside the test div collide with the target image. Is this doable using Jquery UI? Thanks for the help!

Answer 1

The Drag and Drop Events might handle what you're trying to accomplish. If you need to detect an exact collision though, you could use mousemove events to be notified whenever things move, then use JQuery's offset(), width() and height() functions to get the coordinates and sizes of each element and compare them to see if the two rectangles intersect.