js实现鼠标拖拽多选功能示例


Posted in Javascript onAugust 01, 2017

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo:

遮罩出现:

js实现鼠标拖拽多选功能示例

被遮罩盖住的,即为选中的块(背景色为粉色)

js实现鼠标拖拽多选功能示例

下面是具体代码,注释已在文中,与大家交流。

<!DOCTYPE html>
<html>
<head>
  <title>鼠标拖拽多选功能</title>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <style type="text/css">
    *{
      box-sizing:border-box;
    }
    ul{
      width:500px;
      height:auto;
      margin:0;
      padding:20px;
      font-size: 0;
      /*需设置定位*/
      position:relative;
    }
    li{
      width:70px;
      height:70px;
      margin:10px;
      padding:0;
      display:inline-block;
      vertical-align: top;
      font-size: 13px;
      border:1px solid #d9d9d9;
    }
    #moveSelected{
      position:absolute;
      background-color: blue;
      opacity:0.3;
      border:1px dashed #d9d9d9;
      top:0;
      left:0;
    }
    .selected{
      background-color: pink;
    }
  </style>
</head>
<body>
  <ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <!-- 鼠标拖拽出的遮罩 (定位为 position:absolute)-->
    <!-- 遮罩最好是在绑定了mouseover事件的元素内部,并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面,依然可以利用冒泡执行父元素的mouseover事件,就不会出现遮罩只能扩大,不能缩小的情况了(亲自试过) -->
    <div id="moveSelected"></div>
  </ul>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    let moveSelected=$('#moveSelected')[0];
    let flag=false;//是搜开启拖拽的标志
    let oldLeft=0;//鼠标按下时的left,top
    let oldTop=0;
    let selectedList=[];//拖拽多选选中的块集合

    // 鼠标按下时开启拖拽多选,将遮罩定位并展现
    $(".list").mousedown(function(event) {
      flag=true;
      moveSelected.style.top=event.pageY+'px';
      moveSelected.style.left=event.pageX+'px';
      oldLeft=event.pageX;
      oldTop=event.pageY;
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    // 鼠标移动时计算遮罩的位置,宽 高
    $(".list").mousemove(function(event) {
      if(!flag) return;//只有开启了拖拽,才进行mouseover操作
      if(event.pageX<oldLeft){//向左拖
        moveSelected.style.left=event.pageX+'px';
        moveSelected.style.width=(oldLeft-event.pageX)+'px';
      }else{
        moveSelected.style.width=(event.pageX-oldLeft)+'px';
      }
      if(event.pageY<oldTop){//向上
        moveSelected.style.top=event.pageY+'px';
        moveSelected.style.height=(oldTop-event.pageY)+'px';
      }else{
        moveSelected.style.height=(event.pageY-oldTop)+'px';
      }
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    //鼠标抬起时计算遮罩的right 和 bottom,找出遮罩覆盖的块,关闭拖拽选中开关,清除遮罩数据
    $(".list").mouseup(function(event) {
      moveSelected.style.bottom=Number(moveSelected.style.top.split('px')[0])+Number(moveSelected.style.height.split('px')[0]) + 'px';
      moveSelected.style.right=Number(moveSelected.style.left.split('px')[0])+Number(moveSelected.style.width.split('px')[0])+'px';
      findSelected();
      flag=false;
      clearDragData();
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    $(".list").mouseleave(function(event) {
      flag=false;
      moveSelected.style.width=0;
      moveSelected.style.height=0;
      moveSelected.style.top=0;
      moveSelected.style.left=0;
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    function findSelected(){
      let blockList=$('.list').find('li');
      for(let i=0;i<blockList.length;i++){
        //计算每个块的定位信息
        let left=$(blockList[i]).offset().left;
        let right=$(blockList[i]).width()+left;
        let top=$(blockList[i]).offset().top;
        let bottom=$(blockList[i]).height()+top;
        //判断每个块是否被遮罩盖住(即选中)
        let leftFlag=moveSelected.style.left.split('px')[0]<=left && left<=moveSelected.style.right.split('px')[0];
        let rightFlag=moveSelected.style.left.split('px')[0]<=right && right<=moveSelected.style.right.split('px')[0];
        let topFlag=moveSelected.style.top.split('px')[0]<=top && top<=moveSelected.style.bottom.split('px')[0];
        let bottomFlag=moveSelected.style.top.split('px')[0]<=bottom && bottom<=moveSelected.style.bottom.split('px')[0];
        if((leftFlag || rightFlag) && (topFlag || bottomFlag)){
          selectedList.push(blockList[i]);
          $(blockList[i]).addClass('selected');
        }
      }
      console.log(selectedList);
    }
    function clearDragData(){
      moveSelected.style.width=0;
      moveSelected.style.height=0;
      moveSelected.style.top=0;
      moveSelected.style.left=0;
      moveSelected.style.bottom=0;
      moveSelected.style.right=0;
    }
  });
</script>

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

Javascript 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
浅谈Javascript变量作用域问题
Dec 16 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
深入理解JS中的substr和substring
Apr 26 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
WEB前端性能优化的7大手段详解
Feb 04 Javascript
js实现登录拖拽窗口
Feb 10 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
使用Node.js实现RESTful API的示例
Aug 01 #Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
js下拉菜单生成器dropMenu使用方法详解
Aug 01 #Javascript
简述jQuery Easyui一些用法
Aug 01 #jQuery
js图片上传的封装代码
Aug 01 #Javascript
使用重写url机制实现验证码换一张功能
Aug 01 #Javascript
js实现拖拽上传图片功能
Aug 01 #Javascript
You might like
php巧获服务器端信息
2006/12/06 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
Javascript base64编码实现代码
2011/12/02 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
使用js实现数据格式化
2014/12/03 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
NodeJs下的测试框架Mocha的简单介绍
2017/02/22 NodeJs
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
搭建vue开发环境
2018/07/19 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python使用any判断一个对象是否为空的方法
2014/11/19 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python二进制文件的转译详解
2019/07/03 Python
Python编写单元测试代码实例
2020/09/10 Python
python 绘制国旗的示例
2020/09/27 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
介绍一下Linux文件的记录形式
2012/04/18 面试题
少儿节目主持串词
2014/04/02 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
2014年安全生产目标责任书
2014/07/23 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
小学毕业感言200字
2015/07/30 职场文书
pandas中pd.groupby()的用法详解
2022/06/16 Python