title: jQuery draggable moving multiple divs in parallel
body: <p>I am struggeling with a Javascript/jQuery issue for about two weeks and it drives me insane. I need multiple divs to be draggable inside a container div. If you move one div, the others just move with it, no matter where dropped in the container. Now, there are two issues:</p>
  
  <p>1) the first element is dropped fine, it's upper lefter corner snaps the mouse pointer but this is fine. BUT when dropping more divs, they have an offset to the correct position on the y axis. NOT the x axis, that works. Interestingly, the offset is exactly the height of the red div, 50 pixels. The third dropped div then has an offset of 100 pixels, the fourth 150 pixels, and so on.</p>
  
  <p>2) When dragging one div, the others get an to me unexplainable offset on both x and y coordinates.</p>
  
  <p>Have a look: <a href="http://jsfiddle.net/6v3hR/7/" rel="nofollow">http://jsfiddle.net/6v3hR/7/</a></p>
  
  <p>I included the mouse pointer location, this makes for easy debugging/position checking. Since issue 2) occurs in the start function, I output the coordinates to the console. And they are the correct ones! You can check that with the mouse pointer going to the respective position and checking the displayed coordinate pair.</p>
  
  <p>Code explanation:</p>
  
  <pre><code>            start: function () {
              $('.drag_inside').each(function (idx) {
                  $(this)[0].originalX = $(this).offset().left;
                  $(this)[0].originalY = $(this).offset().top;
                  console.log('dragging start originalX ' + idx + ' :' + $(this)[0].originalX);
              });
  </code></pre>
  
  <p>Every time a red div is dragged in the container div, start is called. Here, I save the position right at the start, so the original position, hence the names originalX and originalY. I put that in the jQuery Object to have it handy in the drag event function:</p>
  
  <pre><code>        drag: function (e, ui) {
              var offsetY = $(this).offset().top - $(this)[0].originalY;
              var offsetX = $(this).offset().left - $(this)[0].originalX;
              $('.drag_inside').each(function (idx) {
                  $(this).css({
                      top: $(this)[0].originalY + offsetY,
                      left: $(this)[0].originalX + offsetX
                  });
              });
          }
  </code></pre>
  
  <p>Here, I calculate the offset and update the position of all divs via the each function via the css function. This works actually fine, the painful offset is there, but the movement is truely in parallel.</p>
  
  <p>There is a pluging, multidraggable. It is really nice, but it does not play with the recent jQuery 1.9+ versions.</p>
  
  <p>Any help is sooo much appreciated.</p>