网页拖拽排序后并获取现在的排序结果返回给后台

需求问题：后台取出的数据遍历生成的元素，点击排序之后开始排序，排序完成之后，禁止拖动。

实现过程：借用了jQuery ui框架，参考文档地址：https://www.runoob.com/jqueryui/example-draggable.html

DEMO代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI 排序（Sortable） - 默认功能</title>
    <script src="ui/jquery.js"></script>
    <script src="ui/jquery-ui.min.js"></script>
</head>
<body>
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="container">
        <div class="row">
            <ul class="sortable">
                <li id="draggable1" class="drag">
                    11111111
                </li>

　　　　　　　　　 <li id="draggable2" class="drag">
                    22222222
                </li>

            </ul>
        </div>
    </div>
</div>
<script>
    $(function() {
        var arr = '';
        var sort = $(".sortable").sortable({
            handle: ".move",
            cursor: 'move',
            revert: true,
            stop: function() {
                //记录sort后的id顺序数组
                var arr = $(".sortable").sortable('toArray');
                console.log(arr);
                //拖拽后利用localStorage记录顺序
                localStorage.arr = arr;
            }
        });
        var localSt = localStorage.arr;
        //如果有localst记录则，按照这个进行排序元素
        if (localSt) {
            var resArr = localSt.split(',');
            var resUl = $('ul');
            //li 数组
            for (var i = 0; i < resArr.length; i++) {
                resUl.append($("#" + resArr[i]));
            }
        }
    });
</script>
</body>
</html>

posted @ 2019-11-15 17:37 小码哥-倩倩阅读(879) 评论(0) 收藏举报

刷新页面返回顶部