jQuery Sortierbare Keep Tabelle Breite

Question

Konnte nicht eine einfache Lösung für jquery Sortierbar zu Breite der Tabelle während Drag-Element zu finden, forcePlaceholderSize funktioniert nicht wirklich dieses Mal, wenn die Tabelle einige große Element haben - wenn ich beginne, es dann die Tabelle zu ziehen Größe verändert noch-in-Tisch max Breite des Elements, also hier ist das, was ich getan habe:

jQuery("#sortable1").sortable({ 
    items: "tbody:not([not-sortable])", 
    cursor: "move", 
    zIndex: 9999, 
    start: function (event, ui) { 
     var colW = jQuery(".faq_glyph_owner").width(); 
     self.textWidth = ui.item.innerWidth() - colW * 3; 
     jQuery(".faq_text").width(self.textWidth); 
     jQuery("#sortable1").css("table-layout", "fixed"); 
     ui.item.find("div").parent().width(self.textWidth + colW); 
    }, 
    stop: function (event, ui) { 
     jQuery("#sortable1").css("table-layout", "auto"); 
    } 
}); 

so bin ich in der Regel zu zählen Größe ebenso wie es, here is sample of this with table sein sollte und festes Layout Tabelle anzuwenden. Also meine Frage ist: Gibt es eingebaute Möglichkeiten, um die Tabelle Breite während der Sortierung zu halten, als ob Element gezogen ist immer noch in der Tabelle? Bitte beachten Sie, dass ich das Layout der Tabelle nicht fixieren möchte.

P.S. Bitte ignorieren Sie "jQuery", wir haben nur noch älteren Prototyp-Code, der damit interferiert

Answer 1

Dies ist der Code, den ich dafür verwende. Ich erstelle eine Hilfsfunktion, die die Höhe und Breite von allem in der Zeile erhält und sie dann explizit auf diese Höhen und Breiten setzt und eine Zeile als Platzhalter hinzufügt.

var fixHelper = function (e, ui) { 
    ui.children().each(function() { 
     if ($(this).children().length > 0) { 
      fixHelper(e, $(this)); 
     } 
     if(parseInt($(this).css("margin-left")) != 0) 
      $(this).css("margin-left", $(this).css("margin-left")); 

     if (parseInt($(this).css("margin-right")) != 0) 
      $(this).css("margin-right", $(this).css("margin-right")); 

     $(this).width($(this).realWidth(true)); 
     $(this).height($(this).realHeight(true)); 
    }); 

    ui.height(ui.realHeight()); 
    return ui; 
}; 

var unfixHelper = function (ui) { 
    ui.children().each(function() { 
     if ($(this).children().length > 0) { 
      unfixHelper($(this)); 
     } 
     $(this).css("margin-left", ""); 
     $(this).css("margin-right", ""); 
     $(this).css("width", ""); 
     $(this).css("height", ""); 
    }); 
    ui.css("height", ""); 
}; 


var sortableOptions = new Object({ 
    items: "tbody:not([not-sortable])", 
    cursor: "move", 
    zIndex: 9999, 
    helper: fixHelper, 
    start: function (e, ui) { 
     ui.placeholder.height(ui.item.height()); 
     ui.placeholder.html("<td colspan=\"10\">&nbsp;</td>"); 
    }, 
    stop: function (e, ui) { 
     unfixHelper(ui.item); 
     ui.placeholder.html(""); 
    } 
}); 

jQuery("#sortable1").sortable(sortableOptions); 

andere Datei (real-dimensions.js):

$.fn.realWidth = function (inner) { 
    var $t = $(this); 
    var rect = this[0].getBoundingClientRect(); 

    var width; 
    if (rect.width) { 
     // `width` is available for IE9+ 
     width = rect.width; 

    } else { 
     // Calculate width for IE8 and below 
     width = rect.right - rect.left; 
    } 

    if (inner) 
     width -= parseInt($t.css("padding-left")) + parseInt($t.css("padding-right")); 

    return width; 
} 

$.fn.realHeight = function (inner) { 
    var $t = $(this); 
    var rect = this[0].getBoundingClientRect(); 

    var height; 
    if (rect.height) { 
     // `height` is available for IE9+ 
     height = rect.height; 
    } else { 
     // Calculate height for IE8 and below 
     height = rect.top - rect.bottom; 
    } 

    if (inner) 
     height -= parseInt($t.css("padding-top")) + parseInt($t.css("padding-bottom")); 

    return height; 
} 

Answer 2

Es ist eine Option namens helper im sortierbar Widget. Sein Zweck besteht darin, der ziehenden Anzeige etwas Verhalten hinzuzufügen. Der relevante Teil der Änderung ist:

jQuery('#sortable1').sortable({ 
    helper: fixedWidth 
}); 

function fixedWidth(e, ui) { 
    var max_w = 0; 
    // get the max width from all the children 
    ui.children().each(function() { 
     var w = $(this).width(); 
     if (w > max_w) max_w = w; 
    }); 
    // set the width of the table to be the max 
    $('#sortable1').width(max_w); 
    return ui; 
} 

Eine vollständige Umsetzung kann in diesen JSFiddle finden. Ich habe Inspiration von diesem blog bekommen.

Auch, wenn Sie meine Meinung berücksichtigen, würde ich diese Struktur auf eine einfachere Art und Weise bauen, mit <ul> anstelle von <table>. Wie this. Sie müssen nur die <ul> stylen, um eine feste Breite zu haben.

Answer 3

var fixHelper = function(e, ui) { 
    ui.children().each(function() { 
    console.log(e); 
    $(this).width($(this).width()); 
    }); 
    return ui; 
}; 

$("#sortable1 tbody").sortable({ 
    helper: fixHelper 
}).disableSelection(); 

JSfiddle

Source article

Answer 4

Wie wäre es damit:

$("#sortable1").sortable({ 
     items: "tbody:not([not-sortable])", 
     helper: 'clone', 
     cursor: "move", 
     zIndex: 9999, 
     start: function (event, ui) { 
      $(ui.item[0]).show().css('opacity','0'); 
     }, 
     stop: function (event, ui) { 
      $(ui.item[0]).css('opacity','1'); 
     } 
    }); 

Sie sind im Grunde das Element klonen und anstatt es während der Fahrt zu verstecken, Sie opacity von 0 nur anwenden und dann Anwendung opacity von 1 einmal fallen gelassen. Ich hatte nicht wirklich Zeit, es zu testen.