快捷導(dǎo)航

使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)

更新時(shí)間：2022年05月19日 10:01:01 作者：皓月u

最近做了一個(gè)用js實(shí)現(xiàn)鼠標(biāo)拖拽多選的功能,于是整理了一下思路,寫了一個(gè)小demo,下面這篇文章主要給大家介紹了關(guān)于如何使用純JS實(shí)現(xiàn)checkbox的框選效果(鼠標(biāo)拖拽多選)的相關(guān)資料,需要的朋友可以參考下

主要思路

用一個(gè)盒子作為選區(qū)，通過(guò)定位讓其固定在左上角，由于沒有給定選區(qū)元素的寬高所以默認(rèn)不顯示，在 onmousemove 中動(dòng)態(tài)獲取選區(qū)定位的top left bottom right四個(gè)屬性，同時(shí)將鼠標(biāo)拖拽的距離作為選區(qū)的寬高，由于給選區(qū)元素的css設(shè)置了border就呈現(xiàn)出如圖所示的框選效果。（注意：要想自己手動(dòng)勾選復(fù)選框，要給選區(qū)元素的css設(shè)置pointer-events: none;否則點(diǎn)擊復(fù)選框的事件會(huì)被選區(qū)遮擋）然后獲取每個(gè)小復(fù)選框的位置和此時(shí)選區(qū)的位置進(jìn)行比較來(lái)判斷是否在選區(qū)內(nèi)，如果滿足條件就把復(fù)選框的checked屬性設(shè)置為true。

css 代碼如下

         * {
            user-select: none;
        }
        
        #ul {
            position: relative;
            width: 300px;
            height: auto;
            margin: 0 auto;
            padding: 100px;
        }
        
        li {
            display: inline-block;
            margin: 5px;
        }
        
        input {
            width: 30px;
            height: 30px;
        }
        
        #moveSelected {
            position: fixed;
            top: 0;
            left: 0;
            border: 1px dashed #2783F5;
            pointer-events: none;
        }

html結(jié)構(gòu)如下

    <ul id="box">
        <li><input type="checkbox" id="check1"></li>
        <li><input type="checkbox" id="check2"></li>
        <li><input type="checkbox" id="check3"></li>
        <li><input type="checkbox" id="check4"></li>
        <li><input type="checkbox" id="check5"></li>
        <li><input type="checkbox" id="check6"></li>
        <li><input type="checkbox" id="check7"></li>
        <li><input type="checkbox" id="check8"></li>
        <li><input type="checkbox" id="check9"></li>
        <li><input type="checkbox" id="check10"></li>
        <li><input type="checkbox" id="check11"></li>
        <li><input type="checkbox" id="check12"></li>
        <li><input type="checkbox" id="check13"></li>
        <li><input type="checkbox" id="check14"></li>
        <li><input type="checkbox" id="check15"></li>
        <li><input type="checkbox" id="check16"></li>
        <li><input type="checkbox" id="check17"></li>
        <li><input type="checkbox" id="check18"></li>
        <li><input type="checkbox" id="check19"></li>
        <li><input type="checkbox" id="check20"></li>
        <!-- 選區(qū) -->
        <li>
            <div id="moveSelected"></div>
        </li>
    </ul>

js主要邏輯如下

    window.onload = function() {
        let flag = false;//是否開啟拖拽
        let oldLeft = 0; //鼠標(biāo)按下時(shí)的位置
        let oldTop = 0;
        let box = document.getElementById('box') //操作區(qū)
        let moveSelected = document.getElementById("moveSelected");//選區(qū)
        let checkboxs = box.getElementsByTagName("input"); //復(fù)選框
        // 鼠標(biāo)按下時(shí)開啟拖拽，給選區(qū)設(shè)置定位
        box.onmousedown = function(e) {
                flag = true;
                moveSelected.style.top = e.pageY + 'px';
                moveSelected.style.left = e.pageX + 'px';
                oldLeft = e.pageX;
                oldTop = e.pageY;
            }
            // 鼠標(biāo)移動(dòng)時(shí)計(jì)算選區(qū)的位置和大小
        box.onmousemove = function(e) {
                if (!flag) return;
                if (e.pageX < oldLeft) { //表示左移
                    moveSelected.style.left = e.pageX + 'px';
                    moveSelected.style.width = (oldLeft - e.pageX) + 'px'; //向左移動(dòng)的距離作為選區(qū)的寬
                } else {
                    moveSelected.style.width = (event.pageX - oldLeft) + 'px';
                }
                if (e.pageY < oldTop) { //向上移動(dòng)
                    moveSelected.style.top = e.pageY + 'px';
                    moveSelected.style.height = (oldTop - e.pageY) + 'px';
                } else {
                    moveSelected.style.height = (e.pageY - oldTop) + 'px';
                }
                //通過(guò)得到的left和top加上元素自身的寬高來(lái)計(jì)算選區(qū)的right和bottom
                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';
                //找出選中的區(qū)域并激活
                for (let i = 0; i < checkboxs.length; i++) {
                    //計(jì)算每個(gè)checkbox的位置信息
                    let left = checkboxs[i].offsetLeft + box.offsetLeft;
                    let right = checkboxs[i].offsetWidth + left;
                    let top = checkboxs[i].offsetTop + box.offsetTop;
                    let bottom = checkboxs[i].offsetHeight + top;
                    //判斷是否在選擇區(qū)
                    let leftCover = moveSelected.style.left.split('px')[0] <= left && left <= moveSelected.style.right.split('px')[0];
                    let rightCover = moveSelected.style.left.split('px')[0] <= right && right <= moveSelected.style.right.split('px')[0];
                    let topCover = moveSelected.style.top.split('px')[0] <= top && top <= moveSelected.style.bottom.split('px')[0];
                    let bottomCover = moveSelected.style.top.split('px')[0] <= bottom && bottom <= moveSelected.style.bottom.split('px')[0];
                    if ((leftCover || rightCover) && (topCover || bottomCover)) {
                        checkboxs[i].checked = true;//激活復(fù)選框
                    }
                }
            }
            //鼠標(biāo)抬起時(shí)清空選區(qū)數(shù)據(jù)
        box.onmouseup = function(e) {
                if (!flag) return;
                flag = false;
                moveSelected.style.width = 0;
                moveSelected.style.height = 0;
                moveSelected.style.top = 0;
                moveSelected.style.left = 0;
                moveSelected.style.bottom = 0;
                moveSelected.style.right = 0;
            }
            // 鼠標(biāo)超出ul選區(qū)失效
        box.onmouseleave = function(e) {
            flag = false;
            moveSelected.style.width = 0;
            moveSelected.style.height = 0;
            moveSelected.style.top = 0;
            moveSelected.style.left = 0;
        }
    }

總結(jié)

到此這篇關(guān)于使用純JS實(shí)現(xiàn)checkbox的框選效果的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)checkbox鼠標(biāo)拖拽多選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: