jquery UI Sortable with table and tr width

Here is the first one solutions with HMTL and jQuery ui code...

Solution 1:

HTML:

<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>

<h2>With <a href='http://www.foliotek.com/devblog/make-table-rows-sortable-using-jquery-ui-sortable/'>original fix</a> applied</h2>
<table id="sort" class="grid" title="Kurt Vonnegut novels">
    <thead>
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

<h2><a href='http://stackoverflow.com/a/1372954/76137'>Modified fix</a> applied</h2>
<table id="sort2" class="grid" title="Kurt Vonnegut novels">
    <thead>
        <tr><th>Year</th><th>Title</th><th>Grade</th></tr>
    </thead>
    <tbody>
        <tr><td>1969</td><td>Slaughterhouse-Five</td><td>A+</td></tr>
        <tr><td>1952</td><td>Player Piano</td><td>B</td></tr>
        <tr><td>1963</td><td>Cat's Cradle</td><td>A+</td></tr>
        <tr><td>1973</td><td>Breakfast of Champions</td><td>C</td></tr>
        <tr><td>1965</td><td>God Bless You, Mr. Rosewater</td><td>A</td></tr>
    </tbody>
</table>

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

jQuery Code:

 // Return a helper with preserved width of cells
var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};

$("#sort tbody").sortable({
    helper: fixHelper
}).disableSelection();

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;
};

$("#sort2 tbody").sortable({
    helper: fixHelperModified
  
}).disableSelection();


$("#sort3 tbody").sortable().disableSelection();

Solution 2:

 HTML:

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

jQuery:

// Fix the width of the cells

$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#sortFixed tbody').sortable().disableSelection();

/////////////////////////////////////////////////////////////////////////////////////////////////////
 You can find it for first solution here in JS fiddle: http://jsfiddle.net/bgrins/tzYbU/
You can find it here for second solution here in JS Fiddle: http://jsfiddle.net/rp4fV/3/