table 行在拖动时偏移，使用 JQuery 或 table

Question

我有一个 table 使用边框间距来分隔行。

当使用 JQuery sortable - 并且有效 - 移动时行跳下，这个问题可以修复吗？

此代码演示：

$(function() {
  $("#items").sortable();
  $("#items").disableSelection();
});

table {
  border-spacing: 0 20px;
  background-color: #cda;
}

td {
  width: 170px;
  border: 2px solid gray;
}

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

<table>
  <tbody id="items">
    <tr>
      <td class="list">1</td>
    </tr>
    <tr>
      <td class="list">2</td>
    </tr>
    <tr>
      <td class="list">3</td>
    </tr>
  </tbody>
</table>

Answer 1

我找到了解决办法。我给拖拽的元素添加了一个class，

.up{
margin-top: -20px;
}

(好像是对应border-spacing的值)

添加是通过这样进行可排序调用：

$(function () {
$("#items").sortable({
placeholder: "highlight",
start: function (event, ui) {
ui.item.toggleClass("up");
},
stop: function (event, ui) {
ui.item.toggleClass("up");
}
});
$("#items").disableSelection();
});

table 行在拖动时偏移，使用 JQuery 或 table

The table row gets offset when dragging, using JQuery sortable

jquery

jquery-ui-sortable

border-spacing