How to detect element collision between any two jQuery draggable divs out of many? -

i have many div's identical , spread across screen. each 1 jquery draggable on x-axis. imagine ui-slider many handles. how can write function check whether when of div's may dragging has overlapped other div or div's?

i have global status indicating if on lapping , way determine id's of div's overlap.

this have created far don't quite understand algorhytm of comparing widths/heights/offsets etc. please, need help.

<div class="dragable"> <div class="dragable"> <div class="dragable"> <div class="dragable"> 

--

function collisionchecker(activediv, anyotherdiv) {     //do activediv , anyotherdiv overlap? yes - return true }  $('.dragable').draggable({    drag: function( event, ui ) {        $('.dragable').not(this).each(function(){          $('#result').text( collisionchecker($(ui.helper), $(this)) );       });     } }); 

function collisionchecker(activediv, anyotherdiv) { var othery = anyotherdiv.context.offsettop;// other div x position var otherx = anyotherdiv.context.offsetleft;// other div y position var otherwidth = anyotherdiv.context.offsetwidth;// other div width var otherheight = anyotherdiv.context.offsetheight;// other div height  var activey = activediv.context.offsettop;// active div x var activex = activediv.context.offsetleft;// active div y var activewidth = activediv.context.offsetwidth;// active div width var activeheight = activediv.context.offsetheight;// active div height  // limit definition var otherlimitx = otherx + otherwidth; if (activex === otherlimitx ) {   alert("collision"); } 

}