jQueryUI sortierbar auf Tabellenzeilen verkleinert sie beim Ziehen

Question

Dieses Problem von Tabellenzeilen schrumpft, während in der sortierbaren Funktion gezogen wird, beunruhigt mich für eine lange Zeit. Irgendeine Antwort? (Q & A)

P.S. Um sortierbar zu sein, um überhaupt auf Tabellen zu arbeiten, müssen Sie TBODY um die Tabellenreihen verwenden, die Sie sortieren möchten, und dann die sortierbare Funktion auf dem enthaltenden TBODY aufrufen.

Answer 1

Alles, was Sie tun müssen, ist, den Tabellenzellen eine bestimmte Pixelbreite zu geben. Wie können wir es tun, ohne den Inhalt der Tabellenzellen zu kennen? einfach:

$(document).ready(function(){ 
    $('td').each(function(){ 
     $(this).css('width', $(this).width() +'px'); 
    }); 
}); 

Answer 2

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

Answer 3

Keine der angebotenen Lösungen für mich gearbeitet.

In meinem Fall wurde jQuerys ui sortierbare Höhe und Breite berechnet, abgerundet und überschrieb die automatisch berechneten Dimensionen über das Attribut style.

Hier ist, was ich getan habe, um das Problem zu beheben, das ich als eleganter als die meisten der angebotenen Lösungen gefunden habe. (Obwohl es hat !important s drin.)

.ui-sortable-helper { 
    width: auto !important; 
    height: auto !important; 
} 

Answer 4

ich an einer Lösung Online gestolpert.

var fixHelper = function(e, ui) { 
    ui.children().each(function() { 
    $(this).width($(this).width()); 
    }); 
    return ui; 
}; 
$(“#sort tbody”).sortable({ 
helper: fixHelper 
}).disableSelection(); 

Fix sortable tr from shrinking

Answer 5

src jquery-1.12.4.js

src jquery-ui.js

link rel jquery-ui.css

@model Servidor.CListados 
@{ 
    ViewBag.Title = "Index"; 
} 
@using (Html.BeginForm()) 
{ 
    <h2>Listados</h2> 
    <h2>@ViewBag.Mensaje</h2> 
    <table> 
      <tr> 
       <th>Campo1</th> 
       <th>Campo2</th> 
      </tr> 
     <tbody id="sortable"> 
      @foreach (var item in Model.ListaTabla1) 
      { 
       <tr > 
        <td>@Html.DisplayFor(modelItem => item.Campo1)</td> 
        <td>@Html.DisplayFor(modelItem => item.Campo2)</td> 
       </tr> 
      } 
     </tbody> 
    </table> 
    @*<ul id="sortable"> 
     @foreach (var item in Model.ListaTabla1) 
     { 
      <li>@Html.DisplayFor(modelItem => item.Campo1)</li> 
     } 
    </ul>*@ 
} 
    <script>$("#sortable").sortable();</script>