jQueryUI sortowalne w wierszach tabeli zmniejsza je podczas przeciągania

Question

Ten problem z wyciszaniem wierszy tabeli podczas przeciągania w funkcji sortowania sprawia mi problemy przez dłuższy czas. Jakakolwiek odpowiedź? (Q & A)

P.S. aby można było sortować w ogóle przy stołach, MUSISZ użyć TBODY wokół rzędów tabeli, które chcesz posortować, a następnie wywołać funkcję sortable na zawierającej TBODY.

Answer 1

Wszystko, co musisz zrobić, to nadać komórki o określonej szerokości w pikselach. Jak możemy to zrobić bez znajomości zawartości komórek tabeli? prosta:

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

Answer 2

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

Answer 3

Żaden z oferowanych rozwiązań pracował dla mnie.

W moim przypadku obliczona wysokość i szerokość jQuery's ui sortable została zaokrąglona w dół i przesłania automatycznie obliczone wymiary za pomocą atrybutu stylu.

Oto, co zrobiłem, aby rozwiązać problem, który okazał się bardziej elegancki niż większość oferowanych rozwiązań. (Mimo że ma !important w niej jest.)

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

Answer 4

Natknąłem się na rozwiązanie w Internecie.

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>