jqueryui 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">
  <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"> -->
  <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> 
                 5
               </div>
         </div>
         </li> 
          <li id="draggable4" class="drag">
              <div class="innerdiv">
                 <div class="innerdiv2">
                  <div class="move">放在这里</div> 
                 4
                </div>
              </div>
         </li> 
         <li id="draggable5" class="drag">
              <div class="innerdiv">
                 <div class="innerdiv2">
                  <div class="move">放在这里</div> 
                 3
                  </div>
              </div>
         </li> 
         <li id="draggable6" class="drag">
              <div class="innerdiv">
                 <div class="innerdiv2">
                  <div class="move">放在这里</div> 
                 2
               </div>
         </div>
          <li id="draggable1" class="drag">
             <div class="innerdiv">
                <div class="innerdiv2">
                 <div class="move">放在这里</div> 
                 1
               </div>
             </div>
          </li>
         </li> 
     </ul>
   </div>
</body>
</html>
复制代码

 

posted @   断劫断念  阅读(8513)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
点击右上角即可分享
微信分享提示