jquery UI Clasificable con tabla y ancho tr

Estoy usando jQuery UI clasificable para hacer que la cuadrícula de mi tabla se pueda ordenar. El código parece funcionar bien, pero debido a que no estoy agregando ancho a tds, cuando lo arrastro tr, reduce el contenido.

Por ejemplo; si la fila de mi tabla es de 500 px cuando comienzo a arrastrar, se convierte en 300 px. Supongo que eso está sucediendo porque no se define ancho en la cuadrícula. Eso es porque estoy usando dos clases para la tds ( fixy liquid).

La fixclase hace tdque el ancho del contenido sea igual y liquidhace que el tdancho sea 100%. Es mi enfoque para la tabla de cuadrícula sin tener que asignar ancho a tds.

¿Alguna idea de cómo hacer que mi trabajo funcione con mi enfoque?

Encontré la respuesta aquí .

Lo modifiqué ligeramente para clonar la fila, en lugar de agregar anchos al 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;
  },

Creo que puede ayudar:

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

La respuesta seleccionada aquí es una solución realmente agradable, pero tiene un error grave que es evidente en el violín JS original ( http://jsfiddle.net/bgrins/tzYbU/ ): intente arrastrar la fila más larga ( Dios lo bendiga, Sr. . Rosewater ), y el resto de los anchos de celda colapsan.

Esto significa que fijar los anchos de las celdas en la celda arrastrada no es suficiente; también debe corregir los anchos en la tabla.

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

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

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

Esto soluciona el problema del colapso de la tabla después de arrastrar la primera columna, pero introduce una nueva: si cambia el contenido de la tabla, los tamaños de celda ahora se arreglan.

Para solucionar este problema al agregar o cambiar contenido, deberá borrar los anchos establecidos:

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

Luego agregue su contenido, luego corrija los anchos nuevamente.

Esto todavía no es una solución completa, ya que (especialmente con una tabla) necesita un marcador de posición de caída. Para eso necesitamos agregar una función al inicio que construya el marcador de posición:

$('#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/

Parece que clonar la fila no funciona bien en IE8, pero la solución original sí.

Probado con el jsFiddle .

Llame a este código siguiente cuando su tabla esté lista para ser ordenada, esto se asegurará de que sus elementos td se arreglen sin romper la estructura de la tabla.

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

jsFiddle

Después de muchos intentos diferentes, acabo de probar una solución simple que completa la solución de Dave James Miller para evitar que la tabla se encoja mientras arrastra la fila más grande. Espero que ayude :)

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

La solución de Keith está bien, pero produjo un pequeño caos en Firefox que no sumó los colspans sino que los indicó. (El viejo tipo de cuerda js duele en la rodilla)

reemplazando esta línea:

 cellCount += colspan;

con:

 cellCount += colspan-0;

Soluciona el problema. (Como js se ve obligado a tratar las variables como números en lugar de cadenas)

La respuesta de Dave James Miller funcionó para mí, pero debido al diseño de las divisiones del contenedor en mi página, el ayudante que arrastra con el cursor del mouse está desplazado de la posición de mi mouse. Para solucionar eso, agregué lo siguiente a la devolución de llamada auxiliar

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

Aquí está la devolución de llamada completa con la línea anterior agregada:

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

Hubiera agregado esto como un comentario a la respuesta de Dave, pero no tenía suficiente representante en esta cuenta.

Parece que el disableSelection()método es malo y está en desuso hoy en día. Ya no puedo usar entradas de texto dentro de la fila ordenable en Mozilla Firefox 35.0. Simplemente ya no es enfocable.

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

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

Aplique el ordenable al elemento tbody de la tabla y simplemente configure el asistente para 'clonar', como se describe en la API de jquery-ui

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