JavaScript鼠标拖拽及多选功能的实现方法教程-js教程-PHP中文网

首页

web前端

js教程

JavaScript鼠标拖拽及多选功能的实现方法教程

巴扎黑

Aug 07, 2017 pm 03:56 PM

javascriptjs方法

本篇文章主要介绍了js实现鼠标拖拽多选功能示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

遮罩出现：

被遮罩盖住的，即为选中的块（背景色为粉色）

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

<!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事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
    <p id="moveSelected"></p>
  </ul>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    let moveSelected=$(&#39;#moveSelected&#39;)[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+&#39;px&#39;;
      moveSelected.style.left=event.pageX+&#39;px&#39;;
      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+&#39;px&#39;;
        moveSelected.style.width=(oldLeft-event.pageX)+&#39;px&#39;;
      }else{
        moveSelected.style.width=(event.pageX-oldLeft)+&#39;px&#39;;
      }
      if(event.pageY<oldTop){//向上
        moveSelected.style.top=event.pageY+&#39;px&#39;;
        moveSelected.style.height=(oldTop-event.pageY)+&#39;px&#39;;
      }else{
        moveSelected.style.height=(event.pageY-oldTop)+&#39;px&#39;;
      }
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
    });
    //鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
    $(".list").mouseup(function(event) {
      moveSelected.style.bottom=Number(moveSelected.style.top.split(&#39;px&#39;)[0])+Number(moveSelected.style.height.split(&#39;px&#39;)[0]) + &#39;px&#39;;
      moveSelected.style.right=Number(moveSelected.style.left.split(&#39;px&#39;)[0])+Number(moveSelected.style.width.split(&#39;px&#39;)[0])+&#39;px&#39;;
      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=$(&#39;.list&#39;).find(&#39;li&#39;);
      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(&#39;px&#39;)[0]<=left && left<=moveSelected.style.right.split(&#39;px&#39;)[0];
        let rightFlag=moveSelected.style.left.split(&#39;px&#39;)[0]<=right && right<=moveSelected.style.right.split(&#39;px&#39;)[0];
        let topFlag=moveSelected.style.top.split(&#39;px&#39;)[0]<=top && top<=moveSelected.style.bottom.split(&#39;px&#39;)[0];
        let bottomFlag=moveSelected.style.top.split(&#39;px&#39;)[0]<=bottom && bottom<=moveSelected.style.bottom.split(&#39;px&#39;)[0];
        if((leftFlag || rightFlag) && (topFlag || bottomFlag)){
          selectedList.push(blockList[i]);
          $(blockList[i]).addClass(&#39;selected&#39;);
        }
      }
      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鼠标拖拽及多选功能的实现方法教程的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。