jquery ui sortable拖拽后保存位置

239 阅读 0 评论 158 点赞

我是靠谱客的博主壮观手机，这篇文章主要介绍jquery ui sortable拖拽后保存位置，现在分享给大家，希望可以做个参考。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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>