工作中需要将一个左边的设计好的控件，拖拽到右边的面板中，同时保持右边面板中的控件自由排序，这时候就需要及支持拖拽又支持排序的操作了，

Demo截图：从左边控件拖到右边区域

代码段：

<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();

        $(".dragable").draggable({

            connectToSortable: ".sortable",

            helper: "clone",

           // revert: "invalid",

           // handle: ".handle"

        });

    });

</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 dragable">

                        left-test1

                    </div>

                    <div class="box dragable">

                        left-test2

                    </div>

                    <div class="box dragable">

                        left-test3

                    </div>

                </div>

            </div>

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

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

                    <div class="box">

                        test1

                    </div>

                    <div class="box">

                        test2

                    </div>

                    <div class="box">

                        test3

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

　　

jQuery UI Draggable + Sortable 结合使用的更多相关文章

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

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

  2. 让 jQuery UI draggable 适配移动端

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

  3. jquery ui draggable,droppable 学习总结

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

  4. jquery ui 插件------------------------->sortable

    <!doctype html><html lang="en"><head>  <meta charset="utf-8" ...

  5. jQuery UI - draggable 中文API

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

  6. JQuery UI - draggable(转)

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

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

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

  8. jquery UI Draggable和Droppable 案例

    <html> <head><title>draggable</title> <script type="text/javascript& ...

  9. Jquery ui draggable在chrome和ie7下的bug

    当页面足够长,向下滚动一些之后, 在拖动时,被拖动的div会向下产生滚动距离那么高(scrolltop)的差距 鼠标位置距div顶部差距了正好页面scroll的距离,页面scoll越多差的越多. 解决 ...

随机推荐

  1. HTML5 地理定位 【来自百度应用分享平台】

    百度给的地图API接口相当完善,复制过来一下,以后备用 基本使用方法: <!--引入百度地图API--> <scriptsrc="http://api.map.baidu. ...

  2. SSH登陆阿里云服务器出现Permission denied (publickey)错误解决方案

    操作环境: 操作系统:Mac10.11.5 阿里云服务器:Ubuntu16.04 远程连接:SSH 注:首先我们已假设你已经自己生成了SSH秘钥,并已经配置到阿里云.绑定了自己的云服务器. 但是后来发 ...

  3. Linux：安装Zookeeper

    1.下载 wget http://mirror.bit.edu.cn/apache/zookeeper/zookeeper-3.5.3-beta/zookeeper-3.5.3-beta.tar.gz ...

  4. sql日期函数总结

    sql 时间转换格式 convert(varchar(10),字段名,转换格式)   convert(varchar(10),字段名,转换格式) CONVERT(nvarchar(10),count_ ...

  5. struts转换器

    struts转换器:在B/S应用中,将字符串请求参数转换为相应的数据类型,是MVC框架提供的功能,而Struts2是很好的MVC框架实现者,理所当然,提供了类型转换机制. 一.类型转换的意义 对于一个 ...

  6. LeetCode OJ：Longest Common Prefix（最长公共前缀）

    Write a function to find the longest common prefix string amongst an array of strings. 求很多string的公共前 ...

  7. Arcgis for Javascript之统计图的实现

    首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...

  8. HDU - 6183：Color it （线段树&动态开点||CDQ分治）

    Do you like painting? Little D doesn't like painting, especially messy color paintings. Now Little B ...

  9. python之懒惰属性(延迟初始化)

    Python 对象的延迟初始化是指,当它第一次被创建时才进行初始化,或者保存第一次创建的结果,然后每次调用的时候直接返回该结果.延迟初始化主要用于提高性能,避免浪费计算,并减少程序的内存需求. 1. ...

  10. CH1801 括号画家（栈模拟）

    描述 Candela是一名漫画家,她有一个奇特的爱好,就是在纸上画括号.这一天,刚刚起床的Candela画了一排括号序列,其中包含小括号( ).中括号[ ]和大括号{ },总长度为N.这排随意绘制的括 ...