使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo,下面这篇文章主要给大家介绍了关于如何使用纯JS实现checkbox的框选效果(鼠标拖拽多选)的相关资料,需要的朋友可以参考下

主要思路

用一个盒子作为选区，通过定位让其固定在左上角，由于没有给定选区元素的宽高所以默认不显示，在 onmousemove 中动态获取选区定位的top left bottom right四个属性，同时将鼠标拖拽的距离作为选区的宽高，由于给选区元素的css设置了border就呈现出如图所示的框选效果。（注意：要想自己手动勾选复选框，要给选区元素的css设置pointer-events: none;否则点击复选框的事件会被选区遮挡）然后获取每个小复选框的位置和此时选区的位置进行比较来判断是否在选区内，如果满足条件就把复选框的checked属性设置为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结构如下

js主要逻辑如下

    window.onload = function() { let flag = false;//是否开启拖拽 let oldLeft = 0; //鼠标按下时的位置 let oldTop = 0; let box = document.getElementById('box') //操作区 let moveSelected = document.getElementById("moveSelected");//选区 let checkboxs = box.getElementsByTagName("input"); //复选框 // 鼠标按下时开启拖拽，给选区设置定位 box.onmousedown = function(e) { flag = true; moveSelected.style.top = e.pageY + 'px'; moveSelected.style.left = e.pageX + 'px'; oldLeft = e.pageX; oldTop = e.pageY; } // 鼠标移动时计算选区的位置和大小 box.onmousemove = function(e) { if (!flag) return; if (e.pageX