jquery ui sortable拖拽后保存位置

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

 

posted @ 2019-07-03 14:54  夏小夏吖  阅读(748)  评论(0编辑  收藏  举报