title: Sorting grouped data using jqueryUI sortable
body: <p>I have a series of tabular data elements with the following characteristics:</p>
  
  <pre><code>Group Name #1
  Value1-1 Value1-2 Value1-3 Value1-4 ... Value1-N
  
  Group Name #2
  Value2-1 Value2-2 Value2-3 Value2-4 ... Value2-N
  </code></pre>
  
  <p>There's always the same number of Values in each group. The total number of groups isn't known until runtime. It's important that the Values remain in columns (which is why I've selected a <code>table</code>). The width of any particular value in a column may vary. </p>
  
  <p>I need to offer the user the ability to reorder the groups. So, I've been experimenting with jQueryUI sortable to support the sorting, yet I've not come up with a good way to drag both the Group row and the Values row at the same time (and include it in the dragging operation). </p>
  
  <p>I've included a simple <a href="http://jsfiddle.net/wiredprairie/hfb64/" rel="nofollow">jsfiddle</a> as a demonstration.</p>
  
  <p>FYI: There could be several hundred rows of groups and values, so I've avoided solutions that would require manual column-generation/resizing code for now.</p>
  
  <p>One option I'd considered was to use the start event to try to hide the paired row and move it after the sorting operation has completed, but that won't be as nice visually for the user.</p>
  
  <p>A solution or alternative would be much appreciated. </p>