jQuery-Benutzeroberfläche Sortierbar mit Tabelle und tr Breite

Ich habe die Antwort gefunden hier .

Ich habe es leicht modifiziert, um die Zeile zu klonen, anstatt dem Original Breiten hinzuzufügen:

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

Ich denke, es kann helfen:

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

Die hier ausgewählte Antwort ist eine wirklich gute Lösung, aber es gibt einen schwerwiegenden Fehler, der in der ursprünglichen JS-Geige auftaucht ( http://jsfiddle.net/bgrins/tzYbU/ ): Versuchen Sie, die längste zu ziehen Reihe ( Gott segne Sie, Herr Rosewater ), und der Rest der Zellenbreiten bricht zusammen.

Dies bedeutet, dass das Festlegen der Zellenbreiten für die gezogene Zelle nicht ausreicht. Sie müssen auch die Breiten für die Tabelle festlegen.

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

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

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

Dies behebt das Problem, dass die Tabelle nach dem Ziehen der ersten Spalte zusammenfällt, führt jedoch eine neue ein: Wenn Sie den Inhalt der Tabelle ändern, werden die Zellengrößen jetzt festgelegt.

Um dies zu umgehen, müssen Sie beim Hinzufügen oder Ändern von Inhalten die eingestellten Breiten löschen:

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

Fügen Sie dann Ihren Inhalt hinzu und korrigieren Sie die Breite erneut.

Dies ist noch keine vollständige Lösung, da Sie (insbesondere bei einer Tabelle) einen Drop-Platzhalter benötigen. Dazu müssen wir beim Start eine Funktion hinzufügen, die den Platzhalter erzeugt:

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

Es scheint, dass das Klonen der Zeile in IE8 nicht gut funktioniert, die ursprüngliche Lösung jedoch.

Getestet mit der jsFiddle .

Rufen Sie diesen folgenden Code auf, wenn Ihre Tabelle zum Sortieren bereit ist. Dadurch wird sichergestellt, dass Ihre td-Elemente eine feste with-Struktur haben, ohne die Tabellenstruktur zu unterbrechen.

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

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

Es scheint, als ob disableSelection() - Methode schlecht und heutzutage veraltet ist. Ich kann keine Texteingaben mehr in einer sortierbaren Zeile in Mozilla Firefox 35.0 Verwenden. Es ist einfach nicht mehr fokussierbar.

Die Lösung von Keith ist in Ordnung, hat aber in Firefox ein wenig Chaos verursacht, das die Colspans nicht addiert, sondern auf sie aufmerksam gemacht hat. (Der alte js Saitentyp Schmerzen im Knie)

ersetzen dieser Zeile:

 cellCount += colspan;

mit:

 cellCount += colspan-0;

Behebt das Problem. (Da js gezwungen ist, die Variablen als Zahlen anstatt als Zeichenketten zu behandeln)

Die Antwort von Dave James Miller hat für mich funktioniert, aber aufgrund des Layouts der Container-Divs auf meiner Seite ist der Helfer, der mit dem Mauszeiger gezogen wird, von der Position meiner Maus versetzt. Um dies zu beheben, habe ich dem Helfer-Callback Folgendes hinzugefügt

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

Hier ist der vollständige Rückruf mit der obigen Zeile hinzugefügt:

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

Ich hätte dies als Kommentar zu Daves Antwort hinzugefügt, aber ich hatte nicht genug Repräsentanten auf diesem Konto.

jsFiddle

Nach vielen verschiedenen Versuchen habe ich gerade eine einfache Lösung ausprobiert, die die Lösung von Dave James Miller vervollständigt, um zu verhindern, dass die Tabelle beim Ziehen der größten Zeile verkleinert wird. Ich hoffe es hilft :)

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