我正在使用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>
它对表的使用很糟糕,但我必须容忍一些遗留代码
另外,为什么占位符选项不起作用？
解决方法
似乎您正在加载一组非常旧的库,如果您将代码更改为这两行,则问题就消失了.
<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
原文地址：https://www.jb51.cc/jquery/178072.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
