最近工作用需要设计一个自由布局的页面设计。我选了jQuery UI 的 sortable ，可以拖拽，自由排序 使用很方便，写一个demo，做个记录。

第一、单项目自由排序

下图效果

代码段：

<script type="text/javascript">  

    $(function () {

        $("#box_wrap").sortable({

            helper: "clone",

            placeholder: "box-holdplace",

            sort: function (e, ui) {

               //排序时触发事件

            },

           // handle: ".handle",//指定元素内的某种元素才可以拖动，非常有用

        }).disableSelection();

    });

</script>

html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="js/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />

    <link href="css/index.css" rel="stylesheet" />

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/bootstrap/js/bootstrap.min.js"></script>

    <!--Sortable -->

    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>

<body>

    <div class="box_wrap" id="box_wrap">

        <div class="box">

            test1

        </div>

        <div class="box">

            test2

        </div>

        <div class="box">test3

        </div>

    </div>

</body>

</html>

　　

第二、多排序组之间自由拖拽

 

代码段：

<script type="text/javascript">

    $(function () {

        $("#box_wrap1,#box_wrap2").sortable({

            connectWith: ".box_wrap",

            helper: "clone",

            cursor: "move",//移动时候鼠标样式

            opacity: 0.5, //拖拽过程中透明度

            placeholder: "box-holdplace",//占位符className，设置一个样式

        }).disableSelection();

    });

</script>

　　html 代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="js/bootstrap/css/bootstrap.css" rel="stylesheet" />

    <link href="js/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />

    <link href="css/index.css" rel="stylesheet" />

    <script src="js/jquery-1.10.2.min.js"></script>

    <script src="js/bootstrap/js/bootstrap.min.js"></script>

    <!--Sortable -->

    <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="column col-md-6">

                <div class="box_wrap" id="box_wrap1">

                    <div class="box">

                        left-test1

                    </div>

                    <div class="box">

                        left-test2

                    </div>

                    <div class="box">

                        left-test3

                    </div>

                </div>

            </div>

            <div class="column col-md-6">

                <div class="box_wrap" id="box_wrap2" >

                    <div class="box">

                        test1

                    </div>

                    <div class="box">

                        test2

                    </div>

                    <div class="box">

                        test3

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

上面另种是工作中比较常用的排序形式。具体API参数可以参考

http://www.css88.com/jquery-ui-api/sortable/#event-out

jQueryUI Sortable 应用Demo的更多相关文章

  1. jqueryui sortable拖拽后保存位置

    jqueryUI sortable 可以用来进行页面拖拽布局,然而有一个小问题就是拖拽后如何保存状态. 工作中遇到了这个情况,遍把这个问题记了下来,具体思路是: 利用拖拽stop后利用   var a ...

  2. H5的draggable属性和jqueryUI.sortable

    拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 一.HTML5 新特性 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. Event On Event Handler 描述 d ...

  3. jquery-ui sortable 使用实例

    jquery-ui sortable 使用实例 最近公司需要做任务看板,需要拖拽效果.点击查看效果.由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable, ...

  4. jquery-ui sortable 在拖动换位置时改变元素的大小导致占位与实际不一致

    使用jquery ui sortable时 需求是在拖动的时候要隐藏一部分元素,然后按照隐藏后的元素高度换位, 解决方案是修改源码jquery-ui.js, _mouseStart方法中开头增加 if ...

  5. jquery-ui sortable 排序

      https://blog.csdn.net/u013066244/article/details/51954198 <link ref="stylesheet" href ...

  6. sortable结合angularjs实现拖动排序

    记录拖动排序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. jquery json ajax

    当html中用script包含了不在同一个目录下的js外部文件(主要是为了通用代码的重用)时,这个js文件的 内容就如同在当前html文件中了,写jquery的时候不用考虑路径问题,可以直接引用htm ...

  8. 23+ Useful HTML5 Open Source Online Video Players & Libraries,

    Akamai’s Open Video Player for HTML5 <video> Akamai has released a new Open Video Player for H ...

  9. jQueryEasyUI应用 – datagrid之CRUD应用

    本文 jQueryEasyUI + SpringBoot + Mybatis整合Datagrid的CRUD应用 一.前言准备 1.我们将使用下面的插件: datagrid:向用户展示列表数据. dia ...

随机推荐

  1. Spring mvc使用不了jstl 或者 Spring mvc不解析jstl

    最近我搭了一个maven的springMVC的项目发现前端怎么也识别不了我的jstl,我查询了很多方法,导致这种情况的原因有很多 1.jar引用不对,maven中的正确导入可用的jar <dep ...

  2. Asp.net使用powershell管理hyper-v

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. visual stdio 2012 c#学习笔记1

    visual stdio 2012 c#学习笔记1 1 我在安装过程中选择的是英文版本,不过刚入手,所以想先从中文菜单入手,所以需要安装中文语言包: microsoft的中文语言包下载地址为:http ...

  4. 各种WEB服务器自带的默认Servlet名称

    Tomcat, Jetty, JBoss, and GlassFish 自带的默认Servlet的名字 -- "default" Google App Engine 自带的 默认S ...

  5. ycsb两个阶段说明

     ycsb有几个目录需要注意下: bin: - 目录下有个可执行的ycsb文件,是个python脚本,是用户操作的命令行接口.ycsb主逻辑是:解析命令行.设置java环境,加载java-libs,封 ...

  6. 随想录（skyeye中的soc仿真）

    [ 声明:版权所有,欢迎转载,请勿用于商业用途. 联系信箱:feixiaoxing @163.com] 想学好soc,再怎么看芯片手册和linux kernel都不为过.但是要学习好kernel,那再 ...

  7. Image Pyramid (二)

    上一篇文章里,我们介绍了图像金字塔的基本原理,就是一种分层次的下采样.这篇文章里我们简单介绍一下图像金字塔的一种应用,image blending.利用图像金字塔做 image blending,可以 ...

  8. P2P技术基础: 关于TCP打洞技术

    4 关于TCP打洞技术 建立穿越NAT设备的p2p的 TCP 连接只比UDP复杂一点点,TCP协议的“打洞”从协议层来看是与UDP的“打洞”过程非常相似的.尽管如此,基于TCP协议的打洞至今为止还没有 ...

  9. 51nod 1085 背包问题

    在N件物品取出若干件放在容量为W的背包里,每件物品的体积为W1,W2……Wn(Wi为整数),与之相对应的价值为P1,P2……Pn(Pi为整数).求背包能够容纳的最大价值. 收起   输入 第1行,2个 ...

  10. HWOJ-字符串的逆序

    将一个字符串str的内容颠倒过来,并输出.str的长度不超过100个字符. 如:输入“I am a student”,输出“tneduts a ma I”. 输入参数: inputString:输入的 ...