In this article I will explain with an example, how to sort (reorder) Table rows with jQuery using Drag and Drop method.
The HTML Table rows will be sorted (reordered) with Drag and Drop method using the jQuery UI Sortable Plugin.
 
 
HTML Markup
The HTML Markup consists of an HTML Table which will be sorted (reordered) using the jQuery UI Sortable Plugin.
<table id="tblLocations" cellpadding="0" cellspacing="0" border="1">
    <tr>
        <th>ID </th>
        <th>Location</th>
        <th>Preference</th>
    </tr>
    <tr>
        <td>1</td>
        <td> Goa</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Mahabaleshwar</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Kerala</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Kashmir</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Ooty</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Simla</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Manali</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>Darjeeling</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Nanital</td>
        <td>9</td>
    </tr>
</table>
 
 
Applying the jQuery UI Sortable Plugin
Inside the jQuery document ready event handler, the jQuery UI Sortable Plugin is applied to the HTML Table.
All rows except the Header row are made draggable and the Axis is set to Y axis as the HTML Table Rows will be dragged and dropped vertically.
In order to distinctly identify a HTML Table Row being dragged, a CSS Class named selected is applied to the Row being dragged in the Start event handler and is removed in the Stop event handler.
In the Stop event handler, the values of the Preference column are updated as per the updated row order.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#tblLocations").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
            $(this).find("tr").each(function (index) {
                if (index > 0) {
                    $(this).find("td").eq(2).html(index);
                }
            });
        }
    });
});
</script>
 
 
Css Class
The following CSS class has been applied to the HTML Table rows and cells.
<style type="text/css">
    table th, table td
    {
        width: 100px;
        padding: 5px;
        border: 1px solid #ccc;
    }
    .selected
    {
        background-color: #666;
        color: #fff;
    }
</style>
 
 
Screenshot
Sort Table rows with jQuery using Drag and Drop method
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code