js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例

更新時間：2017年08月01日 11:04:02 作者：雨花石

本篇文章主要介紹了js實(shí)現(xiàn)鼠標(biāo)拖拽多選功能示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近做了一個用js實(shí)現(xiàn)鼠標(biāo)拖拽多選的功能，于是整理了一下思路，寫了一個小demo：

遮罩出現(xiàn)：

被遮罩蓋住的，即為選中的塊（背景色為粉色）

下面是具體代碼，注釋已在文中，與大家交流。

<!DOCTYPE html>
<html>
<head>
  <title>鼠標(biāo)拖拽多選功能</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;
      /*需設(shè)置定位*/
      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>
    <!-- 鼠標(biāo)拖拽出的遮罩 （定位為 position:absolute）-->
    <!-- 遮罩最好是在綁定了mouseover事件的元素內(nèi)部，并且不要阻止遮罩的冒泡事件。這樣鼠標(biāo)移到了遮罩上面，依然可以利用冒泡執(zhí)行父元素的mouseover事件，就不會出現(xiàn)遮罩只能擴(kuò)大，不能縮小的情況了（親自試過） -->
    <div id="moveSelected"></div>
  </ul>
</body>
</html>
<script type="text/javascript">
  $(document).ready(function(){
    let moveSelected=$('#moveSelected')[0];
    let flag=false;//是搜開啟拖拽的標(biāo)志
    let oldLeft=0;//鼠標(biāo)按下時的left,top
    let oldTop=0;
    let selectedList=[];//拖拽多選選中的塊集合

    // 鼠標(biāo)按下時開啟拖拽多選，將遮罩定位并展現(xiàn)
    $(".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(); // 阻止默認(rèn)行為
      event.stopPropagation(); // 阻止事件冒泡
    });
    // 鼠標(biāo)移動時計算遮罩的位置，寬 高
    $(".list").mousemove(function(event) {
      if(!flag) return;//只有開啟了拖拽，才進(jìn)行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(); // 阻止默認(rèn)行為
      event.stopPropagation(); // 阻止事件冒泡
    });
    //鼠標(biāo)抬起時計算遮罩的right 和 bottom，找出遮罩覆蓋的塊，關(guān)閉拖拽選中開關(guān)，清除遮罩?jǐn)?shù)據(jù)
    $(".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(); // 阻止默認(rèn)行為
      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(); // 阻止默認(rèn)行為
      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;
        //判斷每個塊是否被遮罩蓋?。催x中）
        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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: