Jquery可排序表在拖动时缩小答案

【问题标题】：Jquery sortable table shrinks while draggingJquery可排序表在拖动时缩小
【发布时间】：2018-07-27 01:55:16
【问题描述】：

我的问题是表格在拖动时会缩小。行保持其宽度，但表格缩小。有没有办法在拖动时保持表格的原始宽度？

正在调用可排序功能：

 $("table[id=tblSelectedCAMERC] tbody").sortable();

【问题讨论】：

我的项目中遇到了同样的问题。为了解决这个问题，也许下面的链接可以帮助你stackoverflow.com/questions/11146000/…。
不是行缩水的问题，而是整张表缩水的问题。行保持相同的宽度。
如果您在选定的行中检查，您可以看到它何时被拖动，它的样式发生了变化，这种样式导致收缩行而不是表格。
也许你有什么解决办法？我可以请您修改代码吗？我检查了选定的行，并且确实附加了 jquery ui 类。但我不知道如何防止表格缩小。
我怀疑这与items 选项或placeholder 有关。

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

当对<table> 元素使用Sortable 时，有时最好准确定义item。请审核：http://api.jqueryui.com/sortable/#option-items

我建议如下：

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    item: "> tr",
    handle: ".iORAS_ORD"
  }).disableSelection();
});

更新

由于有一些额外的单元格，您可以这样做：

CSS

.shrink td:last-child {
  display: none;
}

JavaScript

$(function(){  
  $("table[id=tblSelectedCAMERC] tbody").sortable({
    sort: function(evt, ui){
      debugger;
    },
    items: "> tr",
    handle: ".iORAS_ORD",
    scroll: true,
    tolerance: "intersect",
    placeholder: "shrink"
  }).disableSelection();
});

请记住，占位符类应用于项目，在本例中为<tr>。因此，如果我们需要抑制或隐藏某些单元格，我们需要选择它们。此示例假定 1 个额外的单元格。如果您有更多单元格，我建议为它们添加一个类（例如：hidden），以便您可以更轻松地选择它们。您也可以尝试其他 CSS 选择器 (https://www.w3schools.com/cssref/css_selectors.asp)

【讨论】：

表格在拖动时仍然缩小。示例在这里：codepen.io/FrenkyB/pen/WMZmVj
@FrenkyB 你的占位符有 7 个额外的单元格（<td> 元素）作为它的行；因此，其他行“缩小”。您可以通过placeholder 添加一个类并在那里定义它。 forcePlaceholderSize 也很有帮助。
我删除了多余的单元格（显示：无），这解决了问题。虽然我不明白如何保留那些隐藏的单元格而不是缩小表格？请将此添加到您的答案中，以便我将其标记为解决方案。
@FrenkyB 将它们的宽度更改为 0。
我试过 {width:0;display:none;} - codepen.io/FrenkyB/pen/oEqMRo 问题是，一旦我使用 display:none，表格就会缩小。但是只有宽度：0，列是可见的。基本上我必须隐藏列，但不使用 display:none。还有更多的想法吗？

【解决方案2】：

在你的样式表中添加这个：

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

【讨论】：