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>

jqueryui sortable拖拽后保存位置的更多相关文章

  1. C# 图片缩放，拖拽后保存成图片的功能

    窗体界面部分如下: 鼠标的缩放功能需要手动在 OpertaionImg.Designer.cs 文件里面添加一句代码,具体代码如下: //picturePhoto显示图片的控件 this.pictur ...

  2. twaver拓扑图拖拽后保存json数据

    功能描述:拓扑图.对节点进行拖拽,序列化获取拓扑图信息,保存到本地localStorage,刷新页面,执行反序列化,从本地获取之前保存的数据,展现之前拖拽后的拓扑 拓展:此处存储用的是web本地存储l ...

  3. Bootstrap 可视化布局--拖拽后弹窗进行编辑

    Bootstrap 可视化布局--拖拽后弹窗进行编辑 最近后台想一个需求,使用可视化布局-中文 | en中拖拽表格后,弹窗进行编辑,保存下载后在后台生成pdf格式. 奈何各种问题不断,使用 jquer ...

  4. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  5. OpenLayer3调用天地图，拖拽后，地图消失的问题[已解决]

    拖拽后,地图直接消失了,而且右上角的坐标变成了NaN,NaN 后来经过测试发现,原来是自己封装有问题,坐标点一定要用parseFloat()转换下,但不清楚为什么页面刚开始加载的时候没有问题,总之能解 ...

  6. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  7. Sortable拖拽排序插件数据筛选

    后台有拖拽排序功能,然而前段在开发的时候,一整页的数据都发给后端了. 于是查看前端代码,想到了如下解决办法,即先把排序前的保存,然后对比排序后的,有差异的才发回给后端. var new_ids_ord ...

  8. angular ng-repeat+sortable 拖拽demo

    由于项目需求,需要使用angular 实现列表的增.删.改,并且列表支持拖拽. 看了下angular-ui 里面的sortable组件,使用起来也是非常简单,几十行代码就完成了所需功能. 我现在懒得想 ...

  9. VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

随机推荐

  1. 导出Excel1 - 项目分解篇

    我们在全部的MIS系统(信息管理系统)中都能见到他.所以我们把这个通用功能提出来. 项目名称:车辆信息管理系统(中石化石炼) 项目负责人:xiaobin 项目时间:2006.12 - 2007.2 E ...

  2. angular自定义分页组件(实用)

    功能描述:分页,点击按钮或者下一页获取分页接口,同时active到对应页码. html模块: <page page-count="totalPage" on-click-pa ...

  3. 老生常谈之Block

    前面有一篇介绍Block的博客,主要介绍了Block的简单使用技巧.这篇博客主要更加深入地了解一下Block.包括:Block的实现.__Block的原理以及Block的存储域三方面. Block的实 ...

  4. python for循环巧妙运用（迭代、列表生成式）

    200 ? "200px" : this.width)!important;} --> 介绍 我们可以通过for循环来迭代list.tuple.dict.set.字符串,di ...

  5. 用keras作CNN卷积网络书本分类（书本、非书本）

    本文介绍如何使用keras作图片分类(2分类与多分类,其实就一个参数的区别...呵呵) 先来看看解决的问题:从一堆图片中分出是不是书本,也就是最终给图片标签上:“书本“.“非书本”,简单吧. 先来看看 ...

  6. Spring入门篇总结：

    本文是对慕课网上"搞定SSM开发"路径的系列课程的总结,详细的项目文档和课程总结放在github上了.点击查看 视频传送门:Spring入门篇 该门课程主要从Spring的Bean ...

  7. 78、excel的读写操作

    本篇主要是用python来自动生成excel数据文件也就是简单的excel读写操作.python读写excel文件主要是第三方模块库xlrd.xlwt. 本篇导航: 写excel 读excel 一.写 ...

  8. SharedPreferences 存List集合，模拟数据库，随时存取

    PS:SharedPreferences只要稍微学过一点就会用,他本身通过创建一个Editor对象,来存储提交,而editor可以存的格式为 他里面可以存一个Set<String> Set ...

  9. 解决NTPD漏洞，升级Ntpd版本

    关于解决漏洞的问题我就不详说了,主要就是升级版本.这里我们就直接简单记录下步骤: 1.升级 使用root用户登录系统进入到/home/guankong ,上传ntp-4.2.8p9-1.el6.x86 ...

  10. C# (类型、对象、线程栈和托管堆)在运行时的相互关系

    在介绍运行时的关系之前,先从一些计算机基础只是入手,如下图: 该图展示了已加载CLR的一个windows进程,该进程可能有多个线程,线程创建时会分配到1MB的栈空间.栈空间用于向方法传递实参,方法定义 ...