jquery ui sortable拖拽后保存位置


Posted in jQuery onApril 27, 2017

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
为Jquery EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 #jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 #jQuery
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 #jQuery
jQuery使用正则验证15/18身份证的方法示例
Apr 27 #jQuery
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 #jQuery
You might like
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
解析yii数据库的增删查改
2013/06/20 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
thinkphp分页实现效果
2016/10/13 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[03:13]DOTA2-DPC中国联赛1月25日Recap集锦
2021/03/11 DOTA
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
小学毕业典礼主持词
2014/03/27 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
八项规定对照检查材料
2014/08/31 职场文书
五心教育心得体会
2014/09/04 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python