jquery-ui sortable -- prevent drag above first row

jquery-ui sortable -- prevent drag above first row

I have a table where some rows are group names. I don't want any row to be dragged above the first group name row.

I would appreciate any help fixing this so that no "kit" row can be dragged above the first "group" heading row.

My code looks like this:

  1. <form id="groups" name="groups" class="ya" method="POST">
  2.     <input type="hidden" name="group_order" id="group_order">
  3.     <input type="hidden" name="kit_order" id="kit_order">
  4.     <table id="sortable">
  5.     <tbody>
  6.         <!-- this is a group name row -->
  7.         <tr class="group" id="1">
  8.             <th colspan="3">R1b Mdl Haplotypes</th>
  9.         </tr>
  10.         <tr class="kit" id="R1b">
  11.             <td>R1b</td>
  12.             <td></td>
  13.             <td></td>
  14.         </tr>
  15.         <tr class="kit" id="R1b-U106">
  16.             <td>R1b-U106</td>
  17.             <td></td>
  18.             <td></td>
  19.         </tr>
  20.         <tr class="kit" id="R1b-L48">
  21.             <td>R1b-L48</td>
  22.             <td></td>
  23.             <td></td>
  24.         </tr>
  25.         <tr class="kit" id="R-Z159">
  26.             <td>R-Z159</td>
  27.             <td></td>
  28.             <td></td>
  29.         </tr>
  30.         <!-- this is a group name row -->
  31.         <tr class="group" id="3">
  32.             <th colspan="3">Jeremiah SMITH</th>
  33.         </tr>
  34.         <tr class="kit" id="g789">
  35.             <td>g789</td>
  36.             <td>William SMITH</td>
  37.             <td>R-P25</td>
  38.         </tr>
  39.         <tr class="kit" id="g888">
  40.             <td>g888</td>
  41.             <td>B.G. SMITH</td>
  42.             <td>R-M269</td>
  43.         </tr>
  44.     </tbody>
  45.     </table>
  46. </form>
  47.    
  48. <script>
  49. $(function() {
  50.     $( "#sortable tbody" ).sortable({
  51.         placeholder: "ui-state-highlight",
  52.         // don't allow group to be moved
  53.         cancel: ".group"
  54.     });
  55. });
  56. function saveOrder() {
  57.     var newGroupOrder = new Array();
  58.     var newKitOrder = new Array();
  59.     //
  60.     $("table#sortable tr").each(function() {
  61.         if ( $(this).hasClass("group") ) {
  62.             $groupid = $(this).attr("id");
  63.             newGroupOrder.push($groupid);
  64.             $kitorder = 0;
  65.         }
  66.         if ( $(this).hasClass("kit") ) {
  67.             $kit = $groupid + String.fromCharCode(0) + $kitorder + String.fromCharCode(0) + $(this).attr("id");
  68.             newKitOrder.push($kit);
  69.             $kitorder ++;
  70.         }
  71.     });
  72.     document.getElementById("group_order").value = newGroupOrder;
  73.     document.getElementById("kit_order").value = newKitOrder;
  74. }
  75. </script>   

(The code in the script to allow the group rows to be moved works but will not be used.)