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编写textarea输入字数限制代码
Mar 23 jQuery
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
php中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
node.js +mongdb实现登录功能
2020/06/18 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
党校学习思想汇报
2014/01/06 职场文书
个人委托书
2014/07/31 职场文书
逃课检讨书怎么写
2015/01/01 职场文书
MYSQL 表的全面总结
2021/11/11 MySQL