jQueryUI的排序上表中的行缩小他们，而被拖入(jQueryUI sortable on tab

而在排序功能萎缩拖累表行，这个问题困扰了我很长一段时间。 任何答案吗？ （Q＆A）

PS为了排序在所有的工作表上，您必须使用TBODY各地要进行排序，然后呼吁包含TBODY的排序功能表中的行。

Answer 1:

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

Answer 2:

所有你需要做的，就是给一个特定pixeled宽度的表格单元格。 我们怎样才能做到这一点不知道表格单元格的内容？ 简单：

$(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可排序的计算高度和宽度，被四舍五入，并通过覆盖style属性自动计算尺寸。

这是我做过什么来解决这个问题，我认为是比大多数提供的解决方案的更优雅。 （即使它有!important的是秒。）

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

Answer 5:

SRC jQuery的1.12.4.js

SRC jQuery的ui.js

链接版本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>

文章来源: jQueryUI sortable on table rows shrinks them while being dragged