Dragging multiple selected elements

I'm interested in best way to achieve dragging multiple selected elements using (JQuery (Ui)).

At the moment I'm using this piece of code

// Make all divs inside draggableArea draggable

$("#dragableArea div").draggable({

     start : function() {

     }

     drag : function() {
          // Calculate position of other selected elements her开发者_JAVA百科e
          // by hand
     }

     stop : function() {

     }

});

I'm curious to know if there is some better way to achieve the same thing? I would like to trigger the drag event on all selected items, so that they automatically move when any of them is dragged. Is it possible and if yes how (at least in theory)?

Try this out: http://jsfiddle.net/maniator/zVZFq/5/

Based on my answer (and comments) here: How do I drag multiple elements at once with JavaScript or jQuery?

Click to activate the multi-drag.

Here's a working group move based on Neal's solution but perhaps a bit more readable (for me anyway) and with comments: http://jsfiddle.net/stevea/CrJbQ/. It works like a graphic program's "group" function. Click the boxes you want to group. This puts them onto a "group plane." Move the group plane by dragging it or any of the grouped boxes. Click the group plane to ungroup the grouped boxes, leaving them at their new position.

<div id='box1' class='box'></div>
<div id='box2' class='box'></div>
<div id='box3' class='box'></div>
<div id='box4' class='box'></div>
<div id='group'></div>  // group plane