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

Answer 1

jsFiddle

After a lot of different attempts I just tried a simple solution which completes the solution of Dave James Miller to prevent the table of shrinking while dragging the largest row. I hope it will helps :)

// Make sure the placeholder has the same with as the orignal
var start = function(e, ui) {
    let $originals = ui.helper.children();
    ui.placeholder.children().each(function (index) {
        $(this).width($originals.eq(index).width());
    });
}
// Return a helper with preserved width of cells
var helper = function(e, tr) {
    let $helper = tr.clone();
    let $originals = tr.children();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).outerWidth(true));
    });
    return $helper;
};

Answer 2

Dave James Miller's answer worked for me, but because of the layout of the container divs on my page, the helper that drags with the mouse cursor is offset from the position of my mouse. To fix that, I added the following to the helper callback

$(document.body).append($helper);

Here is the complete callback with the above line added:

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

  // append it to the body to avoid offset dragging
  $(document.body).append($helper);

  return $helper;
}

I would have added this as a comment to Dave's answer, but I did not have enough rep on this account.

Answer 3

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

Answer 4

It's seems that cloning the row doesn't work well on IE8, but the original solution does.

Tested with the jsFiddle.

Answer 5

The selected answer here is a really nice solution, but it has one severe bug which is apparent in the original JS fiddle (http://jsfiddle.net/bgrins/tzYbU/): try dragging the longest row (God Bless You, Mr. Rosewater), and the rest of the cell widths collapse.

This means that fixing the cell widths on the dragged cell is not enough - you also need to fix widths on the table.

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

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

JS Fiddle: http://jsfiddle.net/rp4fV/3/

This fixes the problem of the table collapsing after you drag the first column, but introduces a new one: if you change the content of the table the cell sizes are now fixed.

To work around this when adding or changing content you would need to clear the widths set:

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

Then add your content, then fix widths again.

This still isn't a complete solution, as (especially with a table) you need a drop placeholder. For that we need to add a function on start that builds the placeholder:

$('#sortFixed tbody').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    placeholder:'must-have-class',
    start: function (event, ui) {
        // Build a placeholder cell that spans all the cells in the row
        var cellCount = 0;
        $('td, th', ui.helper).each(function () {
            // For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
            var colspan = 1;
            var colspanAttr = $(this).attr('colspan');
            if (colspanAttr > 1) {
                colspan = colspanAttr;
            }
            cellCount += colspan;
        });

        // Add the placeholder UI - note that this is the item's content, so TD rather than TR
        ui.placeholder.html('<td colspan="' + cellCount + '">&nbsp;</td>');
    }
}).disableSelection();

JS Fiddle: http://jsfiddle.net/rp4fV/4/

Answer 6

Keith' solution is fine but produced a little havoc in Firefox which did not add up the colspans but cued them. (The old js string type pain in the knee)

replacing this line:

 cellCount += colspan;

with:

 cellCount += colspan-0;

Fixes the problem. (As js is forced to treat the variables as numbers instead of strings)