Question

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

最初， Initially

最后， Finally

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>

它很糟糕地使用了表格，但我必须忍受一些遗留代码

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

Answer 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

Answer 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>

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

2 个答案: