jquery UI Sortable with table and tr width

Question

I am using jQuery UI sortable to make my table grid sortable. The code seems to work fine but because I am not adding width to tds, when I drag the tr it shrinks the content.

For example; if my table row is 500px when I start dragging, it becomes 300px. I assume that's happening because no width is defined in the grid. That's because I am using two classes for the tds (fix and liquid).

The fix class makes the td equal to the content width and liquid makes the td width 100%. It's my approach for grid table without having to assign width to tds.

Any idea how to make sortable work with my approach?

Answer 1

I found the answer here.

I modified it slightly to clone the row, instead of adding widths to the original:

  helper: function(e, tr)
  {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index)
    {
      // Set helper cell sizes to match the original sizes
      $(this).width($originals.eq(index).width());
    });
    return $helper;
  },