jquery ui sortable拖拽后保存位置

2019-11-19 16:42:49

字体：大中小

来源：转载

供稿：网友

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

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

利用拖拽stop后利用

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

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

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

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 拖动（Draggable） - 约束运动</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 src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <!-- <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" rel="external nofollow" > --> <style>  *{   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; } </style> <script> $(function() {  var arr = '';  var sort = $( ".sortable" ).sortable({    handle: ".move",    opacity: 0.7,    delay: 150,    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></head><body>  <div class="container">   <ul class="sortable">     <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>

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

上一篇：Three.js的使用及绘制基础3D图形详解

下一篇：ES5 ES6中Array对象去除重复项的方法总结