How to achieve something like gravity to div so when I drag div close to glue them, distance =0?

Question

I have two divs inside one bigger div like

<div id='container'>
    <div class='demo'></div>
    <div class='demo'></div>
</div>

and

$('.demo')
 .resizable()
 .draggable()
 .droppable();

And I can fetch coordinates and size of .demo divs after resize and drag. My question is how to achieve something like gravity to that div so when I drag on .demo div close to another .demo div ( for example when distance between them are less than 5px) to glue them, distance =0 ? In production I am going to have lot off divs with class='.demo' so it is heavy to calculate that manually. Does anyone have solution for this ? Did anyone work with jPhysics plugin ?

Answer 1

Surely it's just a case of when a drop event is triggered looping through all the coordinates, and if the right of one box is within say 10px of the left of another, moving the second box into place, then repeating for the vertical measurements.

I can't imagine that is too complex.