表行上的jQueryUI可以在拖动时收缩它们

Question

在可排序函数中拖动时，这个表行缩小的问题让我困扰了很长时间。 有答案吗？ （Q＆A）

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属性覆盖自动计算的维度。

以下是我为解决问题所做的工作，我发现它比大多数提供的解决方案更优雅。 （尽管它有!important的东西。）

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

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>