jQuery UI - 使用 Sortable 拖放行时，行之间的空间增加答案

【问题标题】：jQuery UI - While dragging and dropping rows using Sortable, the space between rows increasesjQuery UI - 使用 Sortable 拖放行时，行之间的空间增加
【发布时间】：2023-03-14 10:51:01
【问题描述】：

我正在使用 jQuery Ui 的 Sortable 小部件在表格行中实现拖放功能。问题是，如果我将第 2 行和第 3 行向下拖动一点（不足以移动下一行），行之间的空间会增加。现在，如果我确实将第二行与第三行交换（通过将第二行拖到第三行下方），第一行和第二行之间会积累大量空间。如果重复以上步骤，我们可以继续增加行间距

最初，

最后，

The code is as follows:

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.min.js"></script>
<script>
    $(document).ready(function() {
        $( "#table tbody " ).sortable({placeholder : 'red',axis:'y',containment:'tbody'});
        $( "#table tbody" ).disableSelection();
    });
</script>
<style>
.red{
    background-color : red;height: 1.5em; line-height: 1.2em;
}
#table{
    border-spacing : 2px;
    background-color : light gray;
}
#table tr{
    background-color : yellow;  
}
body{
    background-color : gray;
}
</style>

</head>
<body>
    <table id="table">
    <thead>
    </thead>
    <tbody>
    <tr>
        <td>
        <label for="name1">Enter name</label>
        <input type="text" id="name1"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name2">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    <tr>
        <td>
        <label for="name3">Enter name</label>
        <input type="text" id="name2"/>
        </td>
    </tr>
    </tbody>
    </table>
</body>
</html>

它对表格的使用不好，但我必须容忍一些遗留代码

另外，为什么占位符选项不起作用？

【问题讨论】：

我在您的代码中没有看到占位符；但是，通常它仅适用于（大多数）HTML5 兼容的浏览器。至于可排序的；我什至无法猜测。小提琴可能会有所帮助（jsfiddle.net）
这是一个给你的小提琴：jsfiddle.net/DMTcU 我不得不修改一些 CSS，因为 fiddle 上有一个 CSS 重置；但我无法复制。
占位符选项在可排序参数中指定
哦，对不起，我应该多加注意的。是的，不确定那个占位符的东西；你已经按照我的方式完成了。 :-/
@GregPettit 我可以使用您的 jsfiddle 示例在 Chrome 中重现该问题。不知道为什么。检查元素没有发现异常。

标签： jquery jquery-ui drag-and-drop

【解决方案1】：

似乎您正在加载一组非常旧的库，如果您将代码更改为这两行，问题就消失了。

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

如果你愿意，你可以将 jqueryui 缩小到可排序，大约 38kb

【讨论】：

实际上，我在 1.8.16 上遇到了这个问题（这是我最初在使用时注意到的），但在更新到 1.8.18 时，我仍然看到它发生了。请参阅我对“幻影”元素四处移动的问题的评论。这可能有助于追踪它。
@jinglesthula 提到的这些更改也不起作用

【解决方案2】：

它似乎与表格边框间距有关。如果你设置“table {border-spacing:0px;}”，你将最小化空间蔓延——如果我给我的表格行在我的测试中设置一个边框，最多 1px。

您可以为表格单元格添加标记吗？如果是这样，您可以将标签和输入嵌套到一个容器中，然后您可以使用该容器来创建间距。

<tr>
  <td>
    <div style="margin:2px 0;">
      <label for="name1">Enter name</label>
      <input type="text" id="name1"/>
    </div>
  </td>
</tr>

【讨论】：

这似乎不会影响我的问题（1px 额外是我想要摆脱的）。如果有帮助，只要我将占位符移动到足以使下面的项目移动到拖动项目的旧位置，就会出现额外的像素宽度，并且它会出现在我从中拖动项目的位置上方的项目的底部边框上。