gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 22:33:54 24 4
gpt4 key购买 nike

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

最初,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>

它对表格的使用很糟糕,但是我必须容忍一些遗留代码

另外,为什么占位符选项不起作用?

最佳答案

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

<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

关于jQuery UI - 使用 Sortable 拖放行时,行之间的空间会增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7864541/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com