title: How do I implement collision detection between a set of Div elements?
body: <p>I have this example in <a href="http://jsfiddle.net/patrioticcow/dzEs4/1/" rel="noreferrer">jsfiddle</a></p>
  
  <p>I have a var as being the collision element:</p>
  
  <pre><code>var $div = $('.container');
  </code></pre>
  
  <p>and then the collision:</p>
  
  <pre><code>function test (){
      $('.drag')
          .drag("start",function( ev, dd ){
              dd.limit = $div.offset();
              dd.limit.bottom = dd.limit.top + $div.outerHeight()
                  - $( this ).outerHeight();
              dd.limit.right = dd.limit.left + $div.outerWidth()
                  - $( this ).outerWidth();
          })
          .drag(function( ev, dd ){
              $( this ).css({
                  top: Math.min( dd.limit.bottom, Math.max( dd.limit.top, dd.offsetY ) ),
                  left: Math.min( dd.limit.right, Math.max( dd.limit.left, dd.offsetX ) )
              });   
          });
  }
  </code></pre>
  
  <p>for:</p>
  
  <pre><code>&lt;div class="container"&gt;&lt;/div&gt;
  &lt;div class="drag xxx" style="left:40px;"&gt;&lt;/div&gt;
  &lt;div class="drag xxx" style="left:120px;"&gt;&lt;/div&gt;
  &lt;div class="drag xxx" style="left:200px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>This code implements collision detection of the child divs against the container div.  How would I implement collision detection to make those 3 divs collide with each other?</p>
  
  <p>I'm thinking to set up another div : <code>var $divs = $('.xxx');</code> but im not sure how to use it within this example.</p>