JavaScript按住⿏标左键选中元素，实现框选（Rubberband）
效果
效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择</title>
<style type="text/css">
body,
html,
h1,
h2,
h3,
h4,
h5,
ul,
li,
div,
input {
margin: 0;
padding: 0;
}
.root {
width: 1500px;
display: flex;
flex-wrap: wrap;
margin: 30px auto;
position: relative;
}
.root>div {
width: 200px;
height: 200px;
height: 200px;
background-color: #00FF00;
transition: background-color .5s ease-in;
margin: 5px;
}
.MouseDiv {
position: absolute;
background-color: #067DF8;
}
</style>
</head>
<body>
<h1 class="title">已选中0个</h1><span>这个计数器可能会⿁畜，不要理会</span>  <div class="root">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script type="text/javascript">
const root = document.querySelector('.root')
const divs = root.querySelectorAll('div')
//创建⼀个DIV DOM
const div = ateElement('div')
const title = document.querySelector('.title')
const body = document.body
let ClientLeft, ClientTop, OffsetLeft, OffsetTop = null
let addLength = []
//给DIV添加CLass名
div.classList.add('MouseDiv')
//初始化
//这个听说是可以取消浏览器选中⽂字拖拽的，但是实际上也不知道有什么⽤
//⿏标点击事件
function OnMousDown(e) {
//点击时，取消之前选中的div
for (let i = 0; i < divs.length; i++) {
divs[i].style.backgroundColor = '#00FF00'
}
//将定义好的div添加到body中，实现⿏标按住有个可视化选区
//将定义好的div添加到body中，实现⿏标按住有个可视化选区
body.appendChild(div)
//当点击时，记录点击的位置
ClientLeft = OffsetLeft = e.clientX
ClientTop = OffsetTop = e.clientY
/
/给body添加⿏标移动事件
body.addEventListener('mousemove', OnMousOver)
return false
}
//⿏标抬起时事件
function OnMousUp() {
//当⿏标台起时， div的样式清零，这个div是创建的虚拟div
div.style.width = 0 + 'px'
div.style.height = 0 + 'px'
//然后进⾏删除
/
/移除⿏标移动事件
return false
}
//给body添加⿏标按下事件和⿏标抬起事件
body.addEventListener('mousedown', OnMousDown, false)
body.addEventListener('mouseup', OnMousUp, false)
//⿏标移动事件
function OnMousOver(e) {
//判断是否是往左移动⿏标
if (ClientLeft >= e.clientX) {
/
/ 左边
div.style.left = ''
div.style.bottom = ''
div.style.right = ((body.clientWidth - ClientLeft)) + 'px'
p = (ClientTop) + 'px'
div.style.width = (ClientLeft - e.clientX) + 'px'
div.style.height = (e.clientY - ClientTop) + 'px'
} else {
//如果不是往左移动，则往右移动
// 右边
div.style.left = (ClientLeft) + 'px'
div.style.right = ''
div.style.bottom = ''
p = (ClientTop) + 'px'
div.style.width = (e.clientX - ClientLeft) + 'px'
div.style.height = (e.clientY - ClientTop) + 'px'
}
if (ClientTop > e.clientY) {
//⿏标往上时
//左上和右上
p = ''
div.style.bottom = (body.clientHeight - ClientTop + (Math.floor(OffsetTop / 2.5))) + 'px'    div.style.height = (ClientTop - e.clientY) + 'px'
}
for (let i = 0; i < divs.length; i++) {
//将移动的div和div元素进⾏体积判断
if (
//左边判断
div.offsetLeft <= (divs[i].offsetLeft + (divs[i].offsetWidth * 2)) &&
((div.offsetLeft + div.offsetWidth) >= (divs[i].offsetLeft + divs[i].offsetWidth))mousemove是什么键
//右边判断
&&
div.offsetTop <= divs[i].offsetTop + divs[i].offsetHeight &&
div.offsetTop + div.offsetHeight >= (divs[i].offsetTop + (divs[i].offsetHeight / 3))
)
{
//如果相等，则添加背景颜⾊
if (divs[i].style.backgroundColor === 'rgb(0, 0, 0)') {
//如果已经添加，则跳出
continue
}
//将已选中的添加到数组中
addLength.push(divs[i])
divs[i].style.backgroundColor = '#000'
} else {
//如果没有选中则清除颜⾊
divs[i].style.backgroundColor = '#00FF00'
//数组删除
addLength.splice(i, 1)
}
}
//进⾏页⾯输出
title.innerText = '已选中' + addLength.length + '个'    return false
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。