使用纯JS实现checkbox的框选效果(鼠标拖拽多选)
更新时间：2022年05月19日 10:01:01 作者：皓月u
最近做了一个用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结构如下
<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>
<!-- 选区 -->
<li>
<div id="moveSelected"></div>
</li>
</ul>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 < oldLeft) { //表示左移
moveSelected.style.left = e.pageX + 'px';
moveSelected.style.width = (oldLeft - e.pageX) + 'px'; //向左移动的距离作为选区的宽
} else {
moveSelected.style.width = (event.pageX - oldLeft) + 'px';
}
if (e.pageY < oldTop) { //向上移动
moveSelected.style.top = e.pageY + 'px';
moveSelected.style.height = (oldTop - e.pageY) + 'px';
} else {
moveSelected.style.height = (e.pageY - oldTop) + 'px';
}
//通过得到的left和top加上元素自身的宽高来计算选区的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';
//找出选中的区域并激活
for (let i = 0; i < checkboxs.length; i++) {
//计算每个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;
//判断是否在选择区
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;//激活复选框
}
}
}
//鼠标抬起时清空选区数据
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;
}
// 鼠标超出ul选区失效
box.onmouseleave = function(e) {
flag = false;
moveSelected.style.width = 0;
moveSelected.style.height = 0;
moveSelected.style.top = 0;
moveSelected.style.left = 0;
}
}总结
到此这篇关于使用纯JS实现checkbox的框选效果的文章就介绍到这了,更多相关JS实现checkbox鼠标拖拽多选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
javascript中的altKey 和 Event属性大全
本文给大家介绍javascript中的altkey和event属性大全，涉及到altkey和event属性语法定义及用法，本文介绍的非常详细，感兴趣的朋友一起看看吧2015-11-11
JavaScript中的Array对象与其他编程语言中的数组一样，是一组数据的集合。在JavaScript中，数组里面的数据可以是不同类型的，并具有用于执行数组常见操作的方法，本文整理了一些常用的，需要的可以参考一下2022-09-09
这篇文章主要为大家介绍了JavaScript时间对象常用方法的设置实例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本文主要介绍了JS中的工厂模式实践。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了arctext.js实现文字平滑弯曲弧形效果的插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
对象转为字符串：通过JSON.encode方法，这个是json.js里面的方法，引入到当前文件就可以了，下面整理的比较详细一点，感兴趣的朋友不要错过2013-10-10
js 通过Object.defineProperty() 定义和控制对象属性
这篇文章主要介绍了js 通过Object.defineProperty() 定义和控制对象属性，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
在Javascript里访问SharePoint列表数据的实现方法
在进行SharePoint订制的时候经常会遇到开发手段受限制的问题，比如通常公司都会限制服务器的访问以及部署，很多开发都只能够在客户端来进行2011-05-05
这篇文章主要为大家详细介绍了Jquery+javascript实现支付网页数字键盘，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本文主要介绍了JavaScript中作用域和作用域链解析，条理分明，方便理解，这里推荐给小伙伴们，有需要的朋友可以参考下2016-12-12
最新评论