jquery-ui Sortable拖拽排序，刷新后保持排序后的位置

南繁协会网站拖拽排序功能实现

最新推荐文章于 2024-12-05 13:33:55 发布

转载最新推荐文章于 2024-12-05 13:33:55 发布 · 940 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fkcqwq/p/11149367.html

文章标签：

#ui #javascript #ViewUI

本文介绍了一个使用jQuery UI实现的拖拽排序功能，该功能允许用户通过拖拽来重新排列南繁协会网站上的栏目顺序，并利用localStorage保存排序结果。

<!DOCTYPE html>
<html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>南繁协会</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow">
    </head>
    <style>
        ul.sortable {
            width: 400px;
            margin: 0 auto;
        }

        ul.sortable h3 {
            color: #333;
            margin-bottom: 15px;
        }

        ul.sortable li {
            list-style: none;
            margin-bottom: 15px;
            border: 1px solid #333;
            cursor: pointer;
        }

        .move {
            height: 40px;
            background: #fff;
            line-height: 40px;
            padding: 0 15px;
            font-size: 14px;
            color: #333;
        }
    </style>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="container">
                <div class="row">
                    <ul class="sortable">
                        <h3>拖拽栏目进行排序 ↑↓</h3>
                        <li id="draggable2" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 协会动态</div>
                                </div>
                            </div>
                        </li>
                        <li id="draggable3" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 图片新闻</div>
                                </div>
                            </div>
                        </li>
                        <li id="draggable4" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 新闻资讯</div>
                                </div>
                            </div>
                        </li>
                        <li id="draggable5" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 行业资讯</div>
                                </div>
                            </div>
                        </li>
                        <li id="draggable6" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 行业服务</div>
                                </div>
                            </div>
                        <li id="draggable1" class="drag">
                            <div class="innerdiv">
                                <div class="innerdiv2">
                                    <div class="move">◉ 战略伙伴</div>
                                </div>
                            </div>
                        </li>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.js"></script>
<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>