首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Jquery UI实现一次拖拽多个选中的元素操作

Posted in Javascript onDecember 01, 2020

项目需要，实现一个拖放操作，要求每次可以拖拽选中的多个元素，释放到目标容器后可排序。考虑了一下，觉得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，贴出简单的效果图和代码

Jquery UI实现一次拖拽多个选中的元素操作

图一（拖放中效果）

Jquery UI实现一次拖拽多个选中的元素操作

图二（释放后效果）

效果图如上，左侧橙色为选中的节点，红色椭圆内部为鼠标拖拽的效果，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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

Jquery UI实现一次拖拽多个选中的元素操作

- Author -

Jeremy阳仔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript基本包装类型介绍
Apr 10 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
js学习总结之dom2级事件基础知识详解
Jul 27 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
基于vue.js中事件修饰符.self的用法(详解)
Feb 23 Javascript
Node.js Buffer模块功能及常用方法实例分析
Jan 05 Javascript
layui 实现二级弹窗弹出之后 关闭一级弹窗的方法
Sep 18 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 #Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 #Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 #Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 #Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 #Javascript
Javascript+CSS3实现进度条效果
Oct 28 #Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
泰国购物网站(30) 奥地利购物网站(28) 阿联酋购物网站(26) 欧洲购物网站(15) 沙特阿拉伯购物网站(9) 土耳其购物网站(10) 哥伦比亚购物网站(5) 葡萄牙购物网站(13) 斯洛伐克购物网站(7) 波兰购物网站(52)
You might like
php 字符过滤类，用于过滤各类用户输入的数据
2009/05/27 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
angularjs实现下拉列表的选中事件示例
2017/03/03 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
JS使用正则表达式判断输入框失去焦点事件
2019/10/16 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[36:52]DOTA2真视界：基辅特锦赛总决赛
2017/05/21 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
java直接调用python脚本的例子
2014/02/16 Python
python3中函数参数的四种简单用法
2018/07/09 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
python能否java成为主流语言吗
2020/06/22 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
户外宣传策划方案
2014/05/25 职场文书
英语教师自荐信
2014/05/26 职场文书
运动会表扬稿
2015/01/16 职场文书
个人工作表现自我评价
2015/03/06 职场文书