Drag the table for sorting the rows

In a recent project, we have such a need to manually drag in a html table row (tr) to sort,

Using a jquery ui sortable of

HTML

We need to introduce jquery and jquery ui js file

<h1>Sorting A Table With jQuery UI</h1>
<a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>Make table rows sortable
    with jQuery UI</a>

<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <thead>
    <tr>
        <th class="index">No.</th>
        <th>Year</th>
        <th>Title</th>
        <th>Grade</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td class="index">1</td>
        <td>1969</td>
        <td>Slaughterhouse-Five</td>
        <td>A+</td>
    </tr>
    <tr>
        <td class="index">2</td>
        <td>1952</td>
        <td>Player Piano</td>
        <td>B</td>
    </tr>
    <tr>
        <td class="index">3</td>
        <td>1963</td>
        <td>Cat's Cradle</td>
        <td>A+</td>
    </tr>
    <tr>
        <td class="index">4</td>
        <td>1973</td>
        <td>Breakfast of Champions</td>
        <td>C</td>
    </tr>
    <tr>
        <td class="index">5</td>
        <td>1965</td>
        <td>God Bless You, Mr. Rosewater</td>
        <td>A</td>
    </tr>
    </tbody>
</table>

javascript:

<script>
    var fixHelperModified = function (e, tr) {
            var $originals = tr.children();
            var $helper = tr.clone();
            $helper.children().each(function (index) {
                $(this).width($originals.eq(index).width())
            });
            return $helper;
        },
        updateIndex = function (e, ui) {
            $('td.index', ui.item.parent()).each(function (i) {
                $(this).html(i + 1);
            });
        };

    $("#sort tbody").sortable({
        helper: fixHelperModified,
        stop: updateIndex
    }).disableSelection();
</script>

In fact, only need $ ( "# sort tbody") sortable () disableSelection ();.. Can, then those two callbacks role, what is it?

helper: fixHelperModified, this function returns: clone you are dragging tr, followed set the width of your tr td that clone, when the width of the original to make it consistent drag. That is, the callback function may not, is dragged in the time tr cell width becomes smaller. Of course not affect the width of the rear let go.

stop: updateIndex, this function returns after dragging now index the maintenance (i.e., the value of the first column).