jQuery UI Sortable table 拖动 tr 时单元格正在缩小

Question

拖动时我面临两个问题。

table 当我有一个隐藏的 td 时，它自己正在缩小。
拖动的 tr cell(td)s 正在缩小

这是sor的代码table:

$('tbody').sortable({
    items: ">tr",
    appendTo: "parent",
    opacity: 1,
    containment: "document",
    placeholder: "placeholder-style",
    cursor: "move",
    delay: 150,
});

jsfiddle link

Answer 1

table 缩小的问题是因为您有一个隐藏的单元格（在 sortable 为您创建的占位符中有 5 个单元格，但没有一个是隐藏的。您可以通过在开始拖动后将 placeholder 中的第二个 td 设置为隐藏来解决此问题：

$(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')

第二个问题是因为你拖动的tr变成了position: absolute，不再具有table的属性。您可以通过将 display: table 设置为该行来解决此问题：

ui.helper.css('display', 'table')

排序完成后必须撤消此更改。

这是完整的更改：

start: function(event, ui) {
    $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
    ui.helper.css('display', 'table')
},
stop: function(event, ui) {
    ui.item.css('display', '')
}

这是一个工作示例

$('tbody').sortable({
  items: ">tr",
  appendTo: "parent",
  opacity: 1,
  containment: "document",
  placeholder: "placeholder-style",
  cursor: "move",
  delay: 150,
  start: function(event, ui) {
   $(this).find('.placeholder-style td:nth-child(2)').addClass('hidden-td')
    ui.helper.css('display', 'table')
  },
  stop: function(event, ui) {
   ui.item.css('display', '')
  }
});

.sort-table{
  width: 100%;
  border: 1px solid #cecece;
  background-color: #d5a45a;
}
thead{
  background-color: #0e79c4;
}
th{
     font-size: 1em;
    line-height: 1.375em;
    font-weight: 400;
    background-color: #0e79c4;
    vertical-align: middle;
    padding: 0.5em 0.9375em;
    text-align: left;
}
tr{
  border: 1px solid #cecece;
}
td{
  padding: 1em;
  vertical-align: middle;
   display: table-cell;
   border-top: 1px solid #cecece;
}
.hidden-td{
  display: none;
}
.placeholder-style{
  background-color: grey;
}

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
  <thead>
    <tr>
      <th class="header-td">Column1 </th>
      <td class="hidden-td">row1 hidden td</td>
      <th class="header-td">Column2 </th>
      <th class="header-td">Column3 </th>
      <th class="header-td">Column4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="body-td">row1 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row1 td2</td>
      <td class="body-td">row1 td3</td>
      <td class="body-td">row1 td4</td>
    </tr>
    <tr>
      <td class="body-td">row2 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row2 td2</td>
      <td class="body-td">row2 td3</td>
      <td class="body-td">row2 td4</td>
    </tr>
    <tr>
      <td class="body-td">row3 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row3 td2</td>
      <td class="body-td">row3 td3</td>
      <td class="body-td">row3 td4</td>
    </tr>
    <tr>
      <td class="body-td">row4 td1</td>
      <td class="body-td hidden-td">row1 hidden td</td>
      <td class="body-td">row4 td2</td>
      <td class="body-td">row4 td3</td>
      <td class="body-td">row4 td4</td>
    </tr>
  </tbody>
</table>

还有一个 jsfiddle：http://jsfiddle.net/mjkq4fb6/

Answer 2

现有答案是正确的，问题是占位符行没有隐藏任何单元格。但是，与其挂钩开始和停止方法，不如将适当的样式应用于 jQuery 已经使用的 classes。

占位符行有 class ui-sortable-placeholder，我们可以用 .ui-sortable-placeholder td{ display: none; } 隐藏它的所有单元格，并且该行仍然可见。拖动行有classui-sortable-helper；我们希望其显示为 table.

一个简短的例子：

$('tbody').sortable();

td{
   border-top: 1px solid #cecece;
}
.hidden-td{
  display: none;
}
.ui-sortable-placeholder td{
    display: none;
}
.ui-sortable-helper{
    display: table;
}

<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table class="sort-table">
  <thead>
    <tr>
      <th>Col1 </th>
      <td class="hidden-td">row1 hidden td</td>
      <th>Col2 </th><th>Col3 </th><th>Col4 </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>row1 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row1 td2</td><td>row1 td3</td><td>row1 td4</td>
    </tr>
    <tr>
      <td>row2 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row2 td2</td><td>row2 td3</td><td>row2 td4</td>
    </tr>
    <tr>
      <td>row3 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row3 td2</td><td>row3 td3</td><td>row3 td4</td>
    </tr>
    <tr>
      <td>row4 td1</td>
      <td class="hidden-td">row1 hidden td</td>
      <td>row4 td2</td><td>row4 td3</td><td>row4 td4</td>
    </tr>
  </tbody>
</table>

jQuery UI Sortable table 拖动 tr 时单元格正在缩小

jQuery UI Sortable table and cell is shrinking while dragging tr

jquery

jquery-ui

jquery-ui-sortable