jquery ui sortable拖拽后保存位置

更新时间：2020-05-09 02:06:02 作者：startmvc

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

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>

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