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

这个表行在可排序函数中拖动时收缩的问题让我困扰了很长时间。 有答案吗？ （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()) { 
Listados
 
@ViewBag.Mensaje
  @foreach (var item in Model.ListaTabla1) {  } 
 
 
Campo1
 
Campo2
 
 
 
@Html.DisplayFor(modelItem => item.Campo1)
 
@Html.DisplayFor(modelItem => item.Campo2)
 
 
 @*
 @foreach (var item in Model.ListaTabla1) { 
@Html.DisplayFor(modelItem => item.Campo1)
 } 
*@ }