首页
所有分类
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 相关文章推荐
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
基于jquery实现一个滚动的分步注册向导-附源码
Aug 26 Javascript
初步了解javascript面向对象
Nov 09 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
Jquery Easyui验证组件ValidateBox使用详解（20）
Dec 18 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
Jul 28 Javascript
vue实现按钮切换图片
Jan 20 Vue.js
浅谈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
RustDesk(1) xhunter1.sys(1) 虚拟键盘(1) 蓝牙耳机(1) HarmonyOS(1) 鸿蒙3.0(1) 华为(1) 蓝牙(1) Debian(1) 鸿蒙(2)
You might like
overlord人气高涨，却被菲利普频繁举报，第四季很难在国内上映
2020/05/06 日漫
融入意大利的咖啡文化
2021/03/03 咖啡文化
PHP和XSS跨站攻击的防范
2007/04/17 PHP
PHP中文编码小技巧
2014/12/25 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题（提供64位wincache下载）
2016/06/22 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
2013/05/11 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Angularjs中三种数据的绑定策略(“@”，“=”，“&amp;”)
2016/12/23 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
js实现下拉框效果（select）
2017/03/28 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
2019/09/11 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
Python中标准库OS的常用方法总结大全
2017/07/19 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
关于初始种子自动选取的区域生长实例（python+opencv)
2020/01/16 Python
优秀生推荐信范文
2013/11/28 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
法人单位授权委托书范文
2014/10/06 职场文书
2014年终个人总结报告
2015/03/09 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android