Jquery可排序表格在拖动时缩小

Question

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

Example is here

使用以下命令调用可排序功能：

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

​

​

Answer 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>。因此，如果我们需要隐藏或隐藏一些单元格，我们需要选择它们。这个例子假设有一个额外的单元格。如果你有更多的单元格，我建议给它们添加一个类(例如：hidden)，这样你就可以更容易地选择它们。你也可以尝试其他的CSS选择器(https://www.w3schools.com/cssref/css_selectors.asp)。

Answer 2

在您的样式表中添加以下内容：

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