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>

 

转载于:https://www.cnblogs.com/fkcqwq/p/11149367.html

你可能感兴趣的:(jquery-ui Sortable拖拽排序,刷新后保持排序后的位置)