title: jQuery Dragging With Collision Detection
body: <p>I have the following HTML:</p>
  
  <pre><code>&lt;div class="list" id="list"&gt;
      &lt;div class="item" id="i1"&gt;Item 1&lt;/div&gt;
      &lt;div class="item" id="i2"&gt;Item 2&lt;/div&gt;
      &lt;div class="item" id="i3"&gt;Item 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="timeline" id="timeline"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to be able to do, with jQuery, is:</p>
  
  <ol>
  <li>Be able to drag <code>.item</code>s from the <code>#list</code> into the <code>#timeline</code></li>
  <li><code>.item</code>s can be dropped into the timeline as many times as required, eg. there could be 4 of item <code>#i1</code> in the timeline.</li>
  <li><code>.item</code>s in the timeline must not overlap each other</li>
  <li><code>.item</code>s can be positioned at any place along the timeline so long as they do not overlap any other items on the timeline</li>
  </ol>
  
  <p>So Ive gone for jQueryUI's Draggable and Droppable, and also gone for the <a href="http://sourceforge.net/projects/jquidragcollide/">jQueryUI Draggable Collision Plugin</a>.</p>
  
  <p>Here is the jQuery I have started with:</p>
  
  <pre><code>$('#list .item').draggable({
      helper: 'clone',
      revert: 'invalid',
      //the following are for the jquery-ui-dragggable-collision plugin
      obstacle: '#timeline .item',
      preventCollision: true
  });
  $('#timeline').droppable({
      accept: '.item'
  });
  </code></pre>
  
  <p>My problem is that the jQueryUI Draggable Collision Plugin only works when you are dragging the original Div itself, and not dragging a helper. I need helpers so that I can achieve #2 (adding multiple copies of one item). But I need something like the Collision Plugin so I can achieve #3 (items not overlapping).</p>
  
  <p>Does anybody know of a solution to this problem? Is there another plugin that does collision detection on the helper of a draggable object? Is there another approach I can try to get what I want to achieve?</p>