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:
- <form id="groups" name="groups" class="ya" method="POST">
- <input type="hidden" name="group_order" id="group_order">
- <input type="hidden" name="kit_order" id="kit_order">
- <table id="sortable">
- <tbody>
- <!-- this is a group name row -->
- <tr class="group" id="1">
- <th colspan="3">R1b Mdl Haplotypes</th>
- </tr>
- <tr class="kit" id="R1b">
- <td>R1b</td>
- <td></td>
- <td></td>
- </tr>
- <tr class="kit" id="R1b-U106">
- <td>R1b-U106</td>
- <td></td>
- <td></td>
- </tr>
- <tr class="kit" id="R1b-L48">
- <td>R1b-L48</td>
- <td></td>
- <td></td>
- </tr>
- <tr class="kit" id="R-Z159">
- <td>R-Z159</td>
- <td></td>
- <td></td>
- </tr>
- <!-- this is a group name row -->
- <tr class="group" id="3">
- <th colspan="3">Jeremiah SMITH</th>
- </tr>
- <tr class="kit" id="g789">
- <td>g789</td>
- <td>William SMITH</td>
- <td>R-P25</td>
- </tr>
- <tr class="kit" id="g888">
- <td>g888</td>
- <td>B.G. SMITH</td>
- <td>R-M269</td>
- </tr>
- </tbody>
- </table>
- </form>
-
- <script>
- $(function() {
- $( "#sortable tbody" ).sortable({
- placeholder: "ui-state-highlight",
- // don't allow group to be moved
- cancel: ".group"
- });
- });
- function saveOrder() {
- var newGroupOrder = new Array();
- var newKitOrder = new Array();
- //
- $("table#sortable tr").each(function() {
- if ( $(this).hasClass("group") ) {
- $groupid = $(this).attr("id");
- newGroupOrder.push($groupid);
- $kitorder = 0;
- }
- if ( $(this).hasClass("kit") ) {
- $kit = $groupid + String.fromCharCode(0) + $kitorder + String.fromCharCode(0) + $(this).attr("id");
- newKitOrder.push($kit);
- $kitorder ++;
- }
- });
- document.getElementById("group_order").value = newGroupOrder;
- document.getElementById("kit_order").value = newKitOrder;
- }
- </script>
(The code in the script to allow the group rows to be moved works but will not be used.)