jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jQuery UI – 使用Sortable拖放行时,行之间的空间增加大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_419_1@我正在使用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

大佬总结

以上是大佬教程为你收集整理的jQuery UI – 使用Sortable拖放行时,行之间的空间增加全部内容,希望文章能够帮你解决jQuery UI – 使用Sortable拖放行时,行之间的空间增加所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。