draggable overlap detection trouble

draggable overlap detection trouble

I have many div's that are spread across the screen. Each one is jQuery draggable on the x-axis. You could imagine it as a ui-slider with many handles. How can I write a function that will check whether when anyone of the div's which I may be dragging has overlapped any other div or div's?

I would like a to have a global status indicating if any are over lapping and also a way to determine the id's of only the div's which overlap.

This is what I have created so far but clearly I have buggered it up... http://jsfiddle.net/bcraig/2vsvdcw4/7/


  2. <div class="box" id="box0" style=" width:40px;">0</div><div class="box" id="box1" style=" width:50px;">1</div>
  3. <div class="box" id="box2" style=" width:80px;">2</div>
  4. <div class="box" id="box3" style=" width:100px;">3</div>
  5. <br><br>
  6. <p class="result"></p>

  2. div { height:40px; float:left; font-size:10px; }
  3. #box0 { background-color:red; width:40px; }
  4. #box1 { background-color:blue; width:40px; }
  5. #box2 { background-color:orange; width:40px; }
  6. #box3 { background-color:green; width:40px; }

  2.   $( "div" ).each(function( index ) {
  3.       var this_right = $(this).position().left + $(this).width();
  4.       $(this).draggable({
  5.             axis: "x",
  6.             drag: function(event,ui) {
  7.                    $( "div" ).each(function( index ) {
  8.                         var ui_right = (ui.position.left + $(ui.helper).width());
  9.                         if(
  10.       ui.position.left < $(this).position().left && ui_right > $(this).position().left ||
  11.       ui.position.left < $(this).position().left && ui_right > this_right ||
  12.       ui.position.left < this_right && ui.position.left > $(this).position().left ||
  13.       ui.position.left > this_right && ui.position.left < this_right
  14.                         ){
  15.                               $('.result').html('overlapped');
  16.                         } else $('.result').html('clear');
  17.                   });
  18.             
  19.                   $( "div" ).each(function( index ) {
  20.                         $(this).html('left:'+$(this).position().left+'<br>right:'+$(this).position().left+$(this).width()));
  21.                   });
  22.             }
  23.     });
  24. });