Draggable Table Rows (working)

by Bruno G.

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="table1">
  <table>
    <tbody>
      <tr class="TR-0">
        <td>COL0</td>
        <td>COL1</td>
        <td>COL2</td>
      </tr>
      <tr class="TR-1">
        <td class="cs">c00</td>
        <td>c01</td>
        <td>c02</td>
      </tr>
      <tr class="TR-2">
        <td class="cs">c10</td>
        <td>c11</td>
        <td>c12</td>
      </tr>
      <tr class="TR-3">
        <td class="cs">c20</td>
        <td>c21</td>
        <td>c22</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

table {
    border-collapse:collapse;
}
table tr td {
    border: 1px solid red;
    padding:2px 15px 2px 15px;
    width:50px;
}

JavaScript

$("#tabs").tabs();

$("tbody").sortable({
    items: "> tr:not(:first)",
    appendTo: "parent",
    helper: "clone",
    handle: ".cs",
    update: function( event, ui ) {
    	console.log('update', ui.item, ui);
    },
    change: function( event, ui ) {
    	console.log('change', ui.item, ui);
    },
    stop: function( event, ui ) {
    	console.log('stop', ui.item, ui);
    }
});