title: jQuery UI draggable collections: dragging elements simultaneously
body: <p>I'm currently trying to build a draggable collection of items in jQuery UI for a Timeline type functionality. I've tried a number of things using the current example I have in the following jsFiddle (<a href="http://jsfiddle.net/cyVYq/" rel="nofollow">http://jsfiddle.net/cyVYq/</a>) however none of my attempts have given me the result i'm after.</p>
  
  <pre><code>&lt;div style="width: 99%; overflow: auto;position:absolute;"&gt;
  
          &lt;div class="TimelineContainer"&gt;
              &lt;div class="Task"&gt;
                  &lt;div id="coords"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="Event"&gt;
              &lt;/div&gt;
              &lt;div class="Resource"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Ideally, I'd like to maintain the spacings between all the child divs when I drag the collection so that they all move simultaneously as one group on drag. Currently I can only achieve them moving independently but in reality these items are linked together.</p>
  
  <p>There may also be a requirement however to pull the child objects up to the start of the parent div. Are either of these options possible?</p>
  
  <p>Any help appreciated!</p>
  
  <p>Cheers</p>