<!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. POJ1787 【完全背包+物品计数+路径输出】

    题意: 有1,5,10,25四种硬币,给每种硬币的数量和要组合成的价值,求刚好达到价值时用的硬币最多,然后还要输出具体的用的数量 前言: 一开始是偶然看见了kuangbin爷的题解说是完全背包+路径, ...

  2. hdoj5667 BestCoder Round #80 【费马小定理（膜拜）+矩阵快速幂+快速幂】

    #include<cstdio> #include<string> #include<iostream> #include<vector> #inclu ...

  3. poj1661【DP，左右两端dp】

    /* [过滤这一段~~~] 一开始想的[错误的,为自己的总结的写的,读者略过]: 每个状态的点肯定是高度,那么我DP每一层,这样的话就有一层循环,其实这无关复杂度,不会很多时间 错误的是想法是从最高层 ...

  4. 【EXCEL终极总结分享】基于NPOI扩展封装的简易操作工具类库（简单灵活易用，支持导出、导入、上传等常见操作）

    对于EXCEL的导入.导出,我之前已分享过多次,比如: 第一种方案:<我写的一个ExcelHelper通用类,可用于读取或生成数据>这个主要是利用把EXCEL当成一个DB来进行获取数据,导 ...

  5. python之url编码

    import urllib.parsempp='besttest 自动化测试'print(urllib.parse.quote_plus(mpp)) #url编码print(urllib.parse. ...

  6. 拦截@RequestBody的请求数据

    要拦截首先想到的是拦截器,@RequestBody只能以流的方式读取,流被读过一次后,就不在存在了,会导致会续无法处理,因此不能直接读流 为了解决这个问题,思路如下: 1.读取流前先把流保存一下 2. ...

  7. AJPFX关于java中可访问控制符和非访问控制符的详细总结

    1.类的修饰符分为:可访问控制符和非访问控制符两种. 可访问控制符是:公共类修饰符 public 非访问控制符有:抽象类修饰符 abstract :最终类修饰符 final 1 )公共类修饰符 pub ...

  8. ThreadPoolExecutor 线程池

    TestThreadPoolExecutorMain package core.test.threadpool; import java.util.concurrent.ArrayBlockingQu ...

  9. Knockout-了解Observable与computed

    KO是什么? KO不是万能的,它的出现主要是为了方便的解决下面的问题: UI元素较多,用户交互比较频繁,需要编写大量的手工代码维护UI元素的状态.样式等属性? UI元素之间关系比较紧密,比如操作一个元 ...

  10. java读取大文件 超大文件的几种方法

    java 读取一个巨大的文本文件既能保证内存不溢出又能保证性能       import java.io.BufferedReader; import java.io.File; import jav ...