title: Sorting multiple table rows with jQuery UI sortable
body: <p>I'm using the sortable function that comes with jQuery UI to enable me to reorder table rows.  It's working fine, here is a <a href="https://jsfiddle.net/2yrkcr69/4/" rel="nofollow">JSFiddle</a> and below is my HTML and JS</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;ID&lt;/th&gt;
        &lt;th&gt;Fruit&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Apple&lt;/td&gt;
      &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Pear&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="sticky"&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;Banana&lt;/td&gt;
      &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;Raspberry&lt;/td&gt;
      &lt;/tr&gt;
        &lt;tr&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;Mango&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  $(function(){
      $("table tbody").sortable();
  });
  </code></pre>
  
  <p>However I want to me able to drag multiple rows at the same time.  Basically when you drag a <code>tr</code> if the <code>tr</code> directly below it has a class of <code>sticky</code> then that <code>tr</code> needs to be dragged with it.  So in my example any time you want to drag and reorder the "Pear" row the "Banana" row underneath will be moved with it.  </p>
  
  <p>I think it's possible to do this with a helper function but I'm really not sure where to start.  If someone could advise me on the best way to do it and point me in the right direction that would be great.  </p>