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

复制代码
<!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>
复制代码

 

posted @   夏小夏吖  阅读(1908)  评论(3)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示