jquery ui sortable拖拽后保存位置

jqueryUI sortable 可以用来进行页面拖拽布局，然而有一个小问题就是拖拽后如何保存状态。

工作中遇到了这个情况，遍把这个问题记了下来，具体思路是：

利用拖拽stop后利用

 var arr = $( ".sortable" ).sortable('toArray');

记录拖拽后的id数组顺序，然后把这个数组存起来，可以存cookie,数据库，localstorage等，刷新页面后读取这个数组，然后进行重新排序。

具体的代码如下可直接复制运行。本文将数组保存在localstorage里面。

 
 
 
 
 
 
 
 
  *{
   margin:0;
   padding: 0;
   box-sizing: border-box;
  }
  .container{
   border: 1px solid black;
   margin-bottom: 10px;
   margin-top: 10px;
  }
  .container:after{
   content: "";
   display: block;
   clear: both;
  }
  .drag{
   width: 200px;
   height: 200px;
   float: left;
  }
  ul li {
   list-style: none;
  }
  .innerdiv{
   padding: 10px;
   height: 100%;
  }
  .innerdiv2{
    background: grey;
    height: 100%;
   }
  #draggable1{
   width: 400px;
   height: 400px;
  }
 .move{
  width: 80px;
  height: 40px;
  background: blanchedalmond;
 }
 
 


  
   

     

      
 
  放在这里 
  只有鼠标放在小长方形里才能移动
 
      
     
     


 
 放在这里 
 
     
     
 
     


  
  放在这里 
 

     
 
     


  
  放在这里 
  

     
 
     


  
  放在这里 
 
     
     


 
  放在这里 
 

     
      
   
  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。