js實現鼠標拖拽多選功能

時間 2019-12-10
原文原文鏈接
最近作了一個用js實現鼠標拖拽多選的功能，因而整理了一下思路，寫了一個小demo：
遮罩出現：

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

下面是具體代碼，註釋已在文中，與你們交流。javascript
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。