<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="external nofollow"> <script type="text/javascript" src="http://img.huiyiguanjia.com/CDNFile/jquery/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <style> ul.sortable{ width: 400px; margin:0 auto; } 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; } </style> <div class="container"> <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> </body> </html> <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>