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

Apply the sortable to the table's tbody element and just set the helper to 'clone', as described in jquery-ui's API

$("$my-table-tbody").sortable({
    helper: "clone"
});

Answer 2

Call this following code when your table is ready to be sorted, this will make sure your td elements has a fixed with without breaking table structure.

 $(".tableToSort td").each(function () {
            $(this).css("width", $(this).width());
        });  

Answer 3

I think it can help:

.ui-sortable-helper {
    display: table;
}

Answer 4

It seems like disableSelection() - method is bad and deprecated nowadays. I can't use text inputs inside sort-able row anymore in Mozilla Firefox 35.0. It just isn't focusable anymore.

Answer 5

.sortable({
    helper: function (e, ui) {
        ui.children().each(function () {
            $(this).width($(this).width());
        });
        return ui;
    }
});

Answer 6

$(function() {
    $( "#sort tbody" ).sortable({
        update: function () {
                                var order = $(this).sortable("toArray").join();
                                $.cookie("sortableOrder", order);
                        }
    });
    if($.cookie("sortableOrder")){
        var order = $.cookie("sortableOrder").split(",");
        reorder(order, $("#sort tbody"));
    }
    function reorder(aryOrder, element){
      $.each(aryOrder, function(key, val){
              element.append($("#"+val));
      });
    }
  });