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

【问题标题】：jQueryUI sortable on table rows shrinks them while being dragged可在表格行上排序的 jQueryUI 在拖动时缩小它们
【发布时间】：2012-06-24 03:36:48
【问题描述】：

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

附：为了让 sortable 在表上工作，您必须在要排序的表行周围使用 TBODY，然后在包含的 TBODY 上调用 sortable 函数。

【问题讨论】：

标签： jquery jquery-ui html-table jquery-ui-sortable shrink

【解决方案1】：

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>

【讨论】：

【解决方案2】：

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

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

【讨论】：

在此表示感谢，因为您对 stackoverflow.com/a/10481803/1531124 的评论为 Intellij 拯救了我的一天！

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

+1 很高兴看到这么简单的解决方案；长期以来，我一直在默默地忍受这个问题。尽管我在被拖动的行和其他行之间仍然存在一些单元格宽度差异，但这非常接近神奇的子弹。
这是文档中的任何地方吗？我似乎找不到它。但我想更好地理解它。
我有一个引导表，拖动时表会缩小。您的解决方案适用于一行 - 它在拖动时不再缩小。表格在拖动时保持固定宽度的任何解决方案？

【解决方案5】：

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

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

【讨论】：

谢谢。这与没有任何明确解决方案的 Bootstrap 完美配合。
“更好”的方法在stackoverflow
我喜欢这种方法。比“更好”的更好。
可能应该使用 $(this).outerWidth() 因为它包括填充
这个问题是它只运行一次。即使窗口调整大小，“更好”的也会运行。