jquery UI Sortable mit Tabelle und tr Breite

Question

Ich verwende jQuery UI sortable, um mein Tabellengitter sortierbar zu machen. Der Code scheint gut zu funktionieren, aber weil ich nicht hinzufügen Breite zu td s, wenn ich die tr wird der Inhalt verkleinert.

Zum Beispiel, wenn meine Tabelle Zeile 500px ist, wenn ich anfangen zu ziehen, wird es 300px. Ich nehme an, dass das passiert, weil keine Breite im Raster definiert ist. Das liegt daran, dass ich zwei Klassen für die td s ( fix y liquid ).

El fix Klasse macht die td gleich der Breite des Inhalts und liquid macht die td Breite 100%. Das ist mein Ansatz für eine Rastertabelle, ohne dass man die Breite der td s.

Irgendeine Idee, wie man sortable mit meinem Ansatz arbeiten zu machen?

Answer 1

jsFiddle

Nach vielen verschiedenen Versuchen habe ich gerade eine einfache Lösung ausprobiert, die die Lösung von Dave James Miller ergänzt, um zu verhindern, dass die Tabelle beim Ziehen der größten Zeile schrumpft. 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;
};

Answer 2

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

Answer 3

Die Lösung von Keith ist in Ordnung, führte aber zu einem kleinen Problem in Firefox, der die Farbspannen nicht addierte, sondern aneinanderreihte. (Die alte js Zeichenfolge Art Schmerz im Knie)

diese Zeile zu ersetzen:

 cellCount += colspan;

mit:

 cellCount += colspan-0;

Behebt das Problem. (Da js gezwungen ist, die Variablen als Zahlen anstelle von Strings zu behandeln)

Answer 4

Dave James Miller's Antwort funktionierte für mich, aber wegen des Layouts der Container-Divs auf meiner Seite, die Helfer, die mit dem Mauszeiger zieht ist von der Position meiner Maus versetzt. Um das zu beheben, fügte ich dem Callback der Hilfsfunktion Folgendes hinzu

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

Hier ist der vollständige Rückruf, dem die obige Zeile hinzugefügt wurde:

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 habe nicht genug Vertreter für dieses Konto.

Answer 5

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