jQueryUI сортируется по строкам таблицы, сжимает их при перетаскивании

Эта проблема с сокращением строк таблицы при перетаскивании в сортируемую функцию вызывает у меня проблемы в течение длительного времени. Любой ответ? (Q & A)

PS, чтобы сортировать, чтобы работать вообще на таблицах, вы ДОЛЖНЫ использовать TBODY вокруг строк таблицы, которые хотите сортировать, а затем вызвать сортируемую функцию на содержащем TBODY.

Ответы

Ответ 1

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

Ответ 2

Все, что вам нужно сделать, заключается в том, чтобы дать ячейкам таблицы определенную пиксельную ширину. Как мы можем это сделать, не зная содержимое ячеек таблицы? просто:

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

Ответ 3

Я наткнулся на решение в Интернете.

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

Устранить сортировку tr от сокращения

Ответ 4

Ни один из предлагаемых решений не работал для меня.

В моем случае jQuery ui sortable вычислял высоту и ширину, округлялся и переопределял автоматически рассчитанные размеры с помощью атрибута style.

Вот что я сделал, чтобы исправить проблему, которую я считаю более элегантной, чем большинство предлагаемых решений. (хотя это !important).

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

Ответ 5

src jquery-1.12.4.js

src jquery-ui.js

ссылка 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>