Jquery-ui的sortable插件之自由拖动排序-table

最新推荐文章于 2024-04-29 13:16:49 发布

Yigezxy

最新推荐文章于 2024-04-29 13:16:49 发布

阅读量699

点赞数 2

分类专栏：前端

原文链接：https://blog.youkuaiyun.com/weixin_42322501/article/details/80514405

版权

前端专栏收录该内容

2 篇文章

订阅专栏

复制粘贴放入jsp文件即可使用

我注释部分是打算用本地的js和layui的样式，方便大家尝试，直接复制粘贴即可使用，样式自行引入吧

参考：https://blog.youkuaiyun.com/weixin_42322501/article/details/80514405

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>拖动排序-表格版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">

    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <%--<link rel="stylesheet" href="<%=request.getContextPath() %>/plugin/layui-v2.4.3/layui/css/layui.css" media="all">--%>
    <%--<script src="<%=request.getContextPath() %>/plugin/layui/layui/layui.js" charset="utf-8"></script>--%>
    <%--<script src="<%=request.getContextPath() %>/plugin/jquery/jquery-ui.min.js" charset="utf-8"></script>--%>

</head>

<body>
<div class="container">
    <table class="layui-table">
        <colgroup>
            <col width="30%">
            <col width="60%">
        </colgroup>
        <%--<thead>--%>
        <%--<tr>--%>
            <%--<th>属性名</th>--%>
            <%--<th>属性值</th>--%>
        <%--</tr>--%>
        <%--</thead>--%>
        <tbody class="sortable">
        <tr id="tb1">
            <td>tb1</td>
            <td class="move">move</td>
        </tr>
        <tr id="tb2">
            <td>tb2</td>
            <td class="move">move</td>
        </tr>
        <tr id="tb3">
            <td>tb3</td>
            <td class="move">move</td>
        </tr>
        <tr id="tb4">
            <td>tb4</td>
            <td class="move">move</td>
        </tr>
        <tr id="tb5">
            <td>tb5</td>
            <td class="move">move</td>
        </tr>
        <tr id="tb6">
            <td>tb6</td>
            <td class="move">move</td>
        </tr>
        <!--<tr>-->
        <!--<td>父节点</td>-->
        <!--<td id="tb7">PARENT_ID</td>-->
        <!--</tr>-->
        </tbody>
    </table>
    <button class="btn">提交</button>
</div>
<%--</div>--%>
</body>

</html>
<script>

        $(document).ready(function(){
            var bttn = $('.container .btn');
            var arr = '';
            var sort = $(".sortable").sortable({
                handle: ".move",
                delay: 0,
                cursor: 'move',
                revert: true,
                stop: bttn.click(function (event) {
                    //记录sort后的id顺序数组
                    var arr = $(".sortable").sortable('toArray');
                    console.log(arr);
                    alert("数组：" + arr)
                })
            });
        })




</script>