1. <!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>
    </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 拖动(Draggable) 约束运动,输出数组排序Array的更多相关文章

  1. JQuery UI - draggable参数中文详细说明

    概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个参 ...

  2. 让 jQuery UI draggable 适配移动端

    背景: 在移动端,本人要实现对某个元素的拖动,想到使用 jQuery UI 的 draggable 功能.但是发现此插件的拖动只支持PC端,不支持移动端. 原因: 原始的 jQuery UI 里,都是 ...

  3. jquery ui draggable,droppable 学习总结

    刚接触的时候,分不清draggable和droppable的区别,瞎弄了一会,其实很简单,draggable就是“拖”的功能,droppable就是“放”的功能. draggable()是被拖动的元素 ...

  4. JQuery UI Draggable插件使用说明文档

    JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动.Draggable的元素受css: ui-draggable影响, 拖动过程中的css: ui-draggable-drag ...

  5. jQuery拖动剪裁图片作为头像

    图片上传是许多网站的一个常用的功能,有时需要对上传的图片做初步的选择裁剪,比如上传头像.下面就是一个使用HTML5+jQuery实现的图片上传裁剪特效,可以对选择要上传的图片做缩小.放大.拖动和裁剪, ...

  6. jQuery模拟打字逐字输出代码

    效果查看:http://hovertree.com/texiao/jquery/70/ jQuery键盘打出逐字逐句显示特效,逐字逐句显示文字 还可以设置每个文字随机颜色: http://hovert ...

  7. JQuery 拖动层

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  8. jQuery UI - draggable 中文API

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

  9. JQuery UI - draggable(转)

    ·概述 在任何DOM元素启用拖动功能.通过单击鼠标并拖动对象在窗口内的任何地方移动. 官方示例地址:http://jqueryui.com/demos/draggable/ 所有的事件回调函数都有两个 ...

随机推荐

  1. hdoj1166【线段树】

    单点更新+区间求和 不多说,直接上渣code--- #include<cstdio> #include<iostream> #include<string.h> # ...

  2. IT兄弟连 JavaWeb教程 Servlet表单数据

    很多情况下,需要传递一些信息,从浏览器到Web服务器,最终到后台程序.浏览器使用两种方法可将这些信息传递到Web服务器,分别为GET方法和POST方法. 1.GET方法 GET 方法向页面请求发送已编 ...

  3. 图论之最小生成树之Kruskal算法

    Kruskal算法,又称作为加边法,是配合并查集实现的. 图示: 如图,这是一个带权值无向图我们要求它的最小生成树. 首先,我们发现在1的所有边上,连到3的边的边权值最小,所以加上这条边. 然后在3上 ...

  4. codeforces 149D Coloring Brackets (区间DP + dfs)

    题目链接: codeforces 149D Coloring Brackets 题目描述: 给一个合法的括号串,然后问这串括号有多少种涂色方案,当然啦!涂色是有限制的. 1,每个括号只有三种选择:涂红 ...

  5. 洛谷p2234/BZOJ1588 [HNOI2002]营业额统计

    题目链接: 洛谷 BZOJ 分析: 好像没有什么好说的就是一个平衡树的板子--唯一要注意的就是这里要找的并不是严格的前驱和后继,因为如果找到之前某一天的营业额和它相等那么差就是0,所以我们仍然在结构体 ...

  6. Testing Round #12 C

    Description For the given sequence with n different elements find the number of increasing subsequen ...

  7. 水题 Codeforces Round #299 (Div. 2) A. Tavas and Nafas

    题目传送门 /* 很简单的水题,晚上累了,刷刷水题开心一下:) */ #include <bits/stdc++.h> using namespace std; ][] = {" ...

  8. MySql数据基本操作sql语句

    表字段 1>插入数据insert 如果不插入id,让id自动增加 INSERT INTO `gpw_group`(group_code, group_parent_id, group_name, ...

  9. PHP设计模式 原型模式(Prototype)

    定义 和工厂模式类似,用来创建对象.但实现机制不同,原型模式是先创建一个对象,采用clone的方式进行新对象的创建. 场景 大对象的创建. 优点 1.可以在运行时刻增加和删除产品 2.可以改变值或结构 ...

  10. python绘图工具包 matplotlib 中文乱码问题

    环境: python2.7 windows 8.1 解决: 改配置文件,把字体改为支持中文的字体. 找到python安装目录下的 \Lib\site-packages\matplotlib\mpl-d ...