项目需要，实现一个拖放操作，要求每次可以拖拽选中的多个元素，释放到目标容器后可排序。考虑了一下，觉得jquery-ui比较合适，毕竟它提供了项目需要的交互性事件机制。拖拽、释放、排序、选择等效果。而在实际的操作中，遇到个很多的问题，说明一下，最后附上效果图和代码。

1.本人使用的bootstrap框架，引入jquery-ui后，为元素添加拖拽方法后，提示该方法不是一个函数。查找原因，是bootstrap和jquery-uide的$ 标识符控制权冲突。在引入的jquery-ui的js前加上一下语句解决

<script>

        jQuery.noConflict();

</script>

2.jquery-ui的提供了选择操作（单选，多选），其中多选可以按住Ctrl配合鼠标单击多选，也可以鼠标在多个元素上拖拽进行多选。在为同一元素添加上选择操作和拖拽操作时，出现了问题。

a：多选的操作由于可以在元素上拖拽，与本身的拖拽事件有冲突（个人认为鼠标拖拽多选的效果并没有使用shift配合鼠标点击好用）。

b：jquery-ui没有发现可以将多个单独的元素同时拖拽。

不知道是本人愚钝没有发现jquery-ui可以使用本身自带的方法和属性，即可以支持多选又能拖拽选中的元素操作。哪位读者如果知晓还请告知。3Q！

总之，试验了多个jquery-ui的属性和事件，有去试着将jquery-ui的拖拽多选操作删除，也没有发现我需要的效果。所以，考虑了一下，决定不适用jquery-ui的选择操作。自己来写一个选择操作。与我们平常使用的事件触发机制一样。（鼠标单击单选，Ctrl+鼠标多选，Shift+鼠标多选），然后配合jquery-ui的drag和drop和sort事件机制实现拖拽排序效果。

再插一嘴，拖拽多个元素的效果，实际上是拖拽一个指定的dom元素，可以将需要拖拽的所有节点都放置到该元素中。这个需要配合jquery-ui的drag中的helper函数，返回一个新的拖拽元素集合。（关于jquery-ui的一些事件和属性大家可从网上查阅。不过说得也不尽详细，还需要自己去实验）。

Okay，贴出简单的效果图和代码

　　　　　　　　　　　　　　　　　　　　　　　　　图一（拖放中效果）

　　　　　　　　　　　　　　　　　　　　　　　　　图二（释放后效果）

效果图如上，左侧橙色为选中的节点，红色椭圆内部为鼠标拖拽的效果，3表示选中的元素呢个数；右侧的黄色区域表示可以释放和排序的容器。在该区域拖放时，节点会根据鼠标的位置自动排序，如图，如果释放鼠标后，左侧的3个节点就会移动到4.对应的黄色区域。

当然，以上的效果需要去重新给拖拽目标赋予新的元素，并且监听拖拽，释放等时间，编写用户自定义的逻辑。贴出自己的代码，一些事件和属性可以查阅jquery-ui的文档。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

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

    <link rel="stylesheet" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" />

    <script src="js/jquery-1.11.2.js"></script>

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

    <script>

        jQuery.noConflict();　　//解决jQuery控制权冲突问题

    </script>

    <script src="js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>

    <style>

        .selectable .ui-selecting{ background: #FECA40; }

        .selectable .ui-selected{ background: #F39814; color: white; }

        .selectable{ list-style-type: none; margin: 0; padding: 0; width: 80%; }

        .selectable li{

            list-style: none;

            margin: 3px; padding: 0.4em; font-size: 1.4em; height: 32px;moz-user-select: -moz-none;

            -moz-user-select: none;

            -o-user-select:none;

            -khtml-user-select:none;

            -webkit-user-select:none;

            -ms-user-select:none;

            user-select:none;

        }

        .drag_info_box{

            width:40px;

            height:40px;

            text-align: center;

            font-size:14px;

            line-height: 40px;

            background: #21aeff;

            color:#000000;

        }

    </style>

    <script>

        $(function(){

　　　　　　　//自定义多选方法

            var selected_begin_index,selected_end_index;

            $("#mydrag").on("mousedown",".selectable>li",function(e){

                var _selectable= $(this).parent();

                if(!e.ctrlKey && !e.shiftKey){  //没有按下Ctrl或Shift键

                    if(!$(this).hasClass("ui-selected")){

                        _selectable.children("li").removeClass("ui-selected");

                    }

                    $(this).addClass("ui-selected");

                    selected_begin_index=_selectable.children("li").index(this);

                }else if(e.ctrlKey && !e.shiftKey){ //只按下Ctrl键

                    $(this).addClass("ui-selected");

                    selected_begin_index=_selectable.children("li").index(this);

                }else if((!e.ctrlKey && e.shiftKey) || (e.ctrlKey && e.shiftKey)){ //只按下Shift键或Ctrl和Shift键都按下

                    _selectable.children("li").removeClass("ui-selected");

                    $(this).addClass("ui-selected");

                    if(selected_begin_index!=undefined){

                        selected_end_index=_selectable.children("li").index(this);

                    }else{

                        selected_begin_index=_selectable.children("li").index(this);

                    }

                    if(selected_end_index>=selected_begin_index){

                        for(var i=selected_begin_index;i<=selected_end_index;i++){

                            _selectable.children("li").eq(i).addClass("ui-selected");

                        }

                    }else{

                        for(var i=selected_end_index;i<=selected_begin_index;i++){

                            _selectable.children("li").eq(i).addClass("ui-selected");

                        }

                    }

                }

            }).on("mouseup",".selectable>li",function(e){

                var _selectable= $(this).parent();

                if(!e.ctrlKey && !e.shiftKey){  //没有按下Ctrl或Shift键

                    _selectable.children("li").removeClass("ui-selected");

                    $(this).addClass("ui-selected");

                }

            });

　　　　　　　　//调用拖拽事件并重新规划处理方式

            $("#mydrag .selectable>li").draggable({

                revert: "invalid",

                containment: "document",

                cursor: "default",

                distance:10,

                zIndex:9,

                opacity:0.5,

                cursorAt: {

                    left: 20,

                    top:40

                },

                connectToSortable:"#mydrag .sample-group>ol",

                helper:function(event,ui){

                    var drag_info_box=$("<div></div>").addClass("drag_info_box");

                        drag_info_box.append($("<span></span>"));

                        drag_info_box.append($('<input type="hidden" />'));

                    return drag_info_box;

                },

                start: function( event, ui ) {

                    var _drag_ele=ui.helper;

                    _drag_ele.children("span").eq(0).text($("#mydrag .selectable>li.ui-selected").length);

                    var selected_li_seq="";

                    $("#mydrag .selectable>li.ui-selected").each(function(){

                        selected_li_seq+= $("#mydrag .selectable>li").index(this)+",";

                    });

                    _drag_ele.children("input").eq(0).val(selected_li_seq.substr(0,selected_li_seq.length-1));

                },

                stop:function( event, ui ) {

                    $(".selectable li").removeClass("ui-selected");

                }

            });

            $("#mydrag .sample-group>ol").droppable({

                activeClass: "ui-state-highlight",

                drop: function( event, ui ) {

                    //这块如果是拖放到排序面板会执行两次,将该内容放到排序的stop方法中

                }

            });

　　　　　　　　
　　　　　　　　//排序完毕后执行真正的释放操作

            $( "#mydrag .sample-group>ol" ).sortable({

                revert: true,

                stop: function( event, ui ) {

                    if(ui.item.hasClass("drag_info_box")){

                        var selected_li_arr=ui.item.children("input").eq(0).val().split(',');

                        for(var i=0;i<selected_li_arr.length;i++){

                            var _group_li_=$("<li></li>")

                                    .addClass("ui-state-highlight ui-sortable-handle").text($("#mydrag .selectable>li").eq(selected_li_arr[i]).text());

                            //为该元素打上上传标签

                            $("#mydrag .selectable>li").eq(selected_li_arr[i]).addClass("delete_flag")

                            $( ".drag_info_box").before(_group_li_);

                        }

                    }

                    $("#mydrag .selectable>li.delete_flag").remove();

                    $(".drag_info_box").remove();

                    $(this).sortable();

                }

            }).disableSelection();

        });

    </script>

</head>

<body>

    <div id="mydrag" style="width:1200px;height: auto;">

        <div class="col-sm-4" style="background: #eeeeee">

            <ol class="selectable">

                <li class="ui-widget-content">Item 1</li>

                <li class="ui-widget-content">Item 2</li>

                <li class="ui-widget-content">Item 3</li>

                <li class="ui-widget-content">Item 4</li>

                <li class="ui-widget-content">Item 5</li>

                <li class="ui-widget-content">Item 6</li>

                <li class="ui-widget-content">Item 7</li>

            </ol>

        </div>

        <div class="col-sm-4" style="background: greenyellow">

            <div class="sample-groups">

                <div class="sample-group" style="min-height: 80px;">

                    <ol>

                        <li class="ui-state-highlight">Item 1</li>

                        <li class="ui-state-highlight">Item 2</li>

                        <li class="ui-state-highlight">Item 3</li>

                        <li class="ui-state-highlight">Item 4</li>

                        <li class="ui-state-highlight">Item 5</li>

                    </ol>

                </div>

            </div>

        </div>

        <div class="col-sm-4" style="background: green">

            <div class="row">

                <div style="background: #ffff00"></div>

                <div class="col-sm-5" style="background: blue"></div>

                <div class="col-sm-2" style="background: red"></div>

                <div class="col-sm-5" style="background: purple"></div>

            </div>

        </div>

    </div>

</body>

</html>

代码可用（没有写单选的释放效果，例子是目前的一个试验品，后续还要改成插件方式）。记录一下这两天的心得。主要是查找事件机制，整理思路和处理冲突问题花费了一定精力，得记上一笔。

感谢参阅。PS，有哪位知道可以不用自己写，只用jquery-ui的自带属性或事件机制就可以实现多选并能拖拽效果的烦请告知。3Q.

使用 Jquery-UI 实现一次拖拽多个选中的元素操作的更多相关文章

  1. jquery UI 跟随学习笔记——拖拽（Draggable）

    引言 这周暂时没有任务下达,所以老大给我的任务就是熟悉jquery相关插件,我就先选择了jquery UI插件,以及jquery库学习. 我用了两天的时候熟悉Interactions模块中的Dragg ...

  2. Javascript实现鼠标框选元素后拖拽被框选的元素

    之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载

  3. 使用jQuery Draggable和Droppable实现拖拽功能

    上篇博客中已经介绍了web开发中基本拖放原理,现在给出需要完成的功能.最后运行的效果如下图所示: 主要功能需求说明: 1.左侧的元素结构最后会通过Ajax call服务器的数据来生成,能支持多级元素. ...

  4. 网站开发常用jQuery插件总结(三）拖拽插件gridster

    1.gridster插件功能 实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本 ...

  5. 【C#/WPF】UI控件的拖拽/拉伸

    需求①:控件拖拽——按住鼠标,可自由拖拽控件. 方法:目前看到的办法有两种. 使用ZoomableCanvas:http://www.cnblogs.com/gnielee/archive/2011/ ...

  6. Appium(九)：Appium API(三) 滑动和拖拽、高级手势、手机操作

    1. 滑动和拖拽 我们在做自动化测试的时候,有些按钮是需要滑动几次屏幕后才会出现,此时,我们需要使用代码来模拟手指的滑动,也就是接下来要学的滑动和拖拽了. 1.1 swipe滑动事件 从一个坐标位置滑 ...

  7. jquery实现对div的拖拽功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jquery ui draggable,droppable 学习总结

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

  9. jQuery UI API - 可拖拽小部件（Draggable Widget）(转)

    所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...

随机推荐

  1. 【WP8.1开发】RenderTargetBitmap类的特殊用途

    相信,耍过WPF的人都知道RenderTargetBitmap这个玩意儿,这家伙比较有意思,它可以将用户界面上呈现的东西写入到内存的位图对象,从而开发者可以在应用程序中使用它,或者将其保存为图像文件. ...

  2. Python标准模块--functools

    1 模块简介 functools,用于高阶函数:指那些作用于函数或者返回其它函数的函数,通常只要是可以被当做函数调用的对象就是这个模块的目标. 在Python 2.7 中具备如下方法, cmp_to_ ...

  3. 深入学习jQuery事件对象

    × 目录 [1]获取 [2]事件类型 [3]事件目标[4]当前元素[5]事件冒泡[6]默认行为[7]命名空间[8]返回值[9]键值 前面的话 在触发DOM上的某个事件时,会产生一个事件对象event, ...

  4. .NET平台开源项目速览(9)软件序列号生成组件SoftwareProtector介绍与使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Software Protector序列号生成组件.今天就通过一篇简单的文章来预览一下其强大的功 ...

  5. Attach Volume 操作（Part II） - 每天5分钟玩转 OpenStack（54）

    上一节我们讨论了 attach volume 操作中 cinder-api 的工作,本节讨论 cinder-volume 和 nova-compute 如何将 volume attach 到 Inst ...

  6. 小菜学习Winform（一）贪吃蛇2

    前言 上一篇<小菜学习Winform(一)贪吃蛇>中实现了简单版的贪吃蛇,在文章末也提到需要优化的地方,比如使用oo.得分模式.速度加快模式和减少界面重绘.因为是优化篇,实现方式上一篇有, ...

  7. winform中textbox属性Multiline=true时全选

    1.文本框右键属性 => 添加KeyDown事件. 2.添加如下代码: private void txt_result_KeyDown(object sender, KeyEventArgs e ...

  8. Selenium3.0 自动化测试

    早在2013年的时候,Selenium官方宣布,Selenium新的版本会在圣诞节的时候发布.但是,他们并没有说哪一个圣诞节发布. 转眼的三年过去了,目前已经发布到Selenium3.0 beta4版 ...

  9. Myeclipse无法开启Servers视图解决办法

    IDE报错如下:  解决办法:1.首先关闭MyEclipse工作空间. 2.然后删除工作空间下的 “/.metadata/.plugins/org.eclipse.core.runtime/.sett ...

  10. SAX解析技术

    SAX,全称Simple API for XML,既是指一种接口,也是指一个软件包.SAX工作原理简单地说就是对文档进行顺序扫描,当扫描到文档(document)开始与结束.元素(element)开始 ...