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

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. docker下运行Gitlab CE+Jenkins+Nexus3+docker-registry-frontend

    DevOps - Gitlab CE - Jenkins - Nexus Gitlab CE https://hub.docker.com/r/gitlab/gitlab-ce/ https://do ...

  2. 三十三 Python分布式爬虫打造搜索引擎Scrapy精讲—数据收集(Stats Collection)

    Scrapy提供了方便的收集数据的机制.数据以key/value方式存储,值大多是计数值. 该机制叫做数据收集器(Stats Collector),可以通过 Crawler API 的属性 stats ...

  3. PHP中的定界符

    因为PHP是一个Web编程语言,在编程过程中难免会遇到用echo来输出大段的html和javascript脚本的情况,如果用传统的输出方法——按字符串输出的话,肯定要有大量的转义符来对字符串中的引号等 ...

  4. Python基础学习（第8天）

    先补充些iter函数的用法:iter()其实就是一个迭代器,参数可传个list.dict等等,然后可通过调用next函数获取下一个元素,默认并未指向对象的第一个元素,可理解为指向了第一个元素的前面的位 ...

  5. 原创：Scala学习笔记（不断更新）

    Scala是一种函数式语言和面向对象语言结合的新语言,本笔记中就零散记下学习scala的一些心得,主要侧重函数式编程方面. 1. 以递归为核心控制结构. 实现循环处理的方式有三种:goto,for/w ...

  6. 用js　创建　　简单查找　删除　二叉树

    <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="2000& ...

  7. android事件传递机制以及onInterceptTouchEvent()和onTouchEvent()总结

    老实说,这两个小东东实在是太麻烦了,很不好懂,我自己那api文档都头晕,在网上找到很多资料,才知道是怎么回事,这里总结一下,记住这个原则就会很清楚了: 1.onInterceptTouchEvent( ...

  8. ROS中使用ABB Yumi IRB14000的一些资料汇总

    目前,ABB RobotStudio 已经更新到6.05.01了,可至官网下载. 使用ABB RobotStudio和ROS进行联合调试,请参考下文: http://blog.csdn.net/Zha ...

  9. 高级C/C++编译技术之读书笔记（五）之动态库版本控制

    最近有幸阅读了<高级C/C++编译技术>深受启发,该书深入浅出地讲解了构建过程(编译.链接)中的各种细节,从多个角度展示了程序与库文件或代码的集成方法,提出了面向代码复用和系统集成的软件架 ...

  10. Java集合总结之Collection整体框架

    前段时间一直在忙一个物联网的项目,所以Java的学习一直搁置,从今天开始继续学习!望大家多提宝贵意见! java.util包中包含了一些在Java 2中新增加的最令人兴奋的增强功能:类集.一个类集(c ...