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

本文轉載自查看原文 2019-07-08 09:42 915 插件用法

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery-ui sortable 使用實例 jQuery UI =>jquery-ui.js中sortable方法拖拽對象位置偏移問題 jquery-ui提供的拖拽方法基於jquery-ui及bootstrap的可拖拽模態框 jquery-ui + jsplubm 實現模塊拖拽連線回顯 JQuery UI - sortable 使用 Jquery-UI 實現一次拖拽多個選中的元素操作 jquery-ui 之draggable詳解 jquery-ui 進度條 JQuery-UI組件化開發