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