checkbox框选实现

最新推荐文章于 2024-07-12 14:10:05 发布

Hoki802

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量183

点赞数 1

分类专栏： JS简单交互文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cloki/article/details/124834427

版权

JS简单交互专栏收录该内容

3 篇文章 0 订阅

订阅专栏

checkbox框选实现

判断item元素是否在mask区域中的原理图：
在这里插入图片描述
利用反向思维，更简单得到想要的结果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>checkbox框选实现优化</title>
    <style>
        #box {
            position: relative;
            width: 100%;
            height: 600px;
            border: 1px solid transparent;
        }
        
        #box #mask {
            display: none;
            position: absolute;
            outline: 1px dashed #aaa;
        }
        
        #box #group-checkbox {
            margin: 100px auto;
            width: 200px;
        }
        
        #box #group-checkbox input {
            width: 20px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="group-checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
            <input type="checkbox">
        </div>
    </div>

    <script>
        window.addEventListener("load", function() {
            //获取元素
            var bd = document.body;
            var box = document.getElementById('box');
            var ipts = document.getElementsByTagName('input');
            //将获取伪数组转化为真数组
            ipts = [...ipts];

            //用一个对象存储mask的起始位置,终点位置，以及高宽
            var frame = {
                start_x: 0,
                start_y: 0,
                mask_height: 0,
                mask_width: 0,
                end_x: 0,
                end_y: 0
            }

            //给body元素绑定mousedown事件
            bd.addEventListener("mousedown", panelMouseDown);

            function panelMouseDown(e) {

                //在mousedown事件触发时，动态创建mask节点
                var mask = document.createElement('div');
                box.appendChild(mask);
                mask.setAttribute("id", "mask");


                //获得当前鼠标点击的位置，并赋值给mask的上侧和左侧偏移量
                frame.start_x = e.clientX;
                frame.start_y = e.clientY;
                mask.style.left = frame.start_x + "px";
                mask.style.top = frame.start_y + "px";
                //触发mousedown事件时显示mask元素
                mask.style.display = "block";
                //在mousedown事件中，绑定mousemove和mouseup事件
                bd.addEventListener("mousemove", panelMouseMove);
                bd.addEventListener("mouseup", panelMouseUp);
            }

            function panelMouseMove(e) {
                //用当前鼠标距离左侧和顶部的距离减去mousedown触发时鼠标距离左侧和顶部的距离
                //得到mask的宽高
                frame.end_x = e.clientX;
                frame.end_y = e.clientY;
                frame.mask_width = frame.end_x - frame.start_x;
                frame.mask_height = frame.end_y - frame.start_y;
                /* 这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,
                我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框. */
                mask.style.left = Math.min(frame.end_x, frame.start_x) + "px";
                mask.style.top = Math.min(frame.end_y, frame.start_x) + "px";
                //设置mask的宽高，由于拖动可能在左或右，值也可能为正，可能为负，所有使用绝对值来约束宽高
                mask.style.width = Math.abs(frame.mask_width) + "px";
                mask.style.height = Math.abs(frame.mask_height) + "px";
                //右下角情况
                if (frame.end_x > frame.start_x && frame.end_y > frame.start_y) {
                    mask.style.left = frame.start_x + "px";
                    mask.style.top = frame.start_y + "px";
                }
                //右上角情况
                if (frame.end_x > frame.start_x && frame.end_y < frame.start_y) {
                    mask.style.left = frame.start_x + "px";
                    mask.style.top = frame.end_y + "px";
                }
                //左下角情况
                if (frame.end_x < frame.start_x && frame.end_y > frame.start_y) {
                    mask.style.left = frame.end_x + "px";
                    mask.style.top = frame.start_y + "px";
                }
                // 左上角情况
                if (frame.end_x < frame.start_x && frame.end_y < frame.start_y) {
                    mask.style.left = frame.end_x + "px";
                    mask.style.top = frame.end_y + "px";
                }
                //遍历元素，对在款选中的checkbox元素进行选中
                for (var i = 0; i < ipts.length; i++) {
                    //利用排他思想
                    ipts[i].checked = false;
                    if (isItemInFrame(ipts[i])) {
                        ipts[i].checked = true;
                    }
                }
                // 阻止事件冒泡
                e.stopPropagation();
                // 阻止默认事件
                e.preventDefault();
            }

            function panelMouseUp() {
                //隐藏mask
                mask.style.display = "none";
                //mouseup事件触发时，将参数还原
                frame = {
                    start_x: 0,
                    start_y: 0,
                    mask_height: 0,
                    mask_width: 0,
                    end_x: 0,
                    end_y: 0
                }

                //删除mask节点
                box.removeChild(mask);
                //解绑mousemove事件和mouseup事件
                bd.removeEventListener("mousemove", panelMouseMove);
                bd.removeEventListener("mouseup", panelMouseUp);
            }

            function isItemInFrame(item) {
                //对非选中区域取反即的到可选中区域
                return !(item.offsetTop > mask.offsetTop + mask.offsetHeight ||
                    item.offsetLeft > mask.offsetLeft + mask.offsetWidth ||
                    mask.offsetTop > item.offsetTop + item.offsetHeight ||
                    mask.offsetLeft > item.offsetLeft + item.offsetWidth
                )
            }
        })
    </script>
</body>

</html>

Hoki802

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
checkbox框选实现

checkbox框选实现判断item元素是否在mask区域中的原理图：利用反向思维，更简单得到想要的结果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫