jquery - 可在表格行上排序的 jQueryUI 在拖动时缩小它们

Question

这个在 sortable 函数中拖动时表格行缩小的问题困扰了我很长时间。有什么答案吗？（问答）

PS为了使可排序的表完全可以工作，您必须在要排序的表行周围使用TBODY，然后在包含的TBODY上调用可排序函数。

Answer 1

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

Answer 2

您需要做的就是为表格单元格提供特定的像素宽度。我们如何在不知道表格单元格内容的情况下做到这一点？简单的：

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

Answer 3

我在网上偶然发现了一个解决方案。

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

修复可排序的 tr 不收缩

Answer 4

提供的解决方案都不适合我。

在我的例子中，jQuery 的 ui sortable 计算的高度和宽度被向下舍入并通过 style 属性覆盖自动计算的尺寸。

这是我为解决这个问题所做的，我发现它比大多数提供的解决方案更优雅。（即使里面有!importants。）

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

Answer 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>