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;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 DOMconst div = document.createElement('div')const title = document.querySelector('.title')const body = document.bodylet ClientLeft, ClientTop, OffsetLeft, OffsetTop = nulllet addLength = []//给DIV添加CLass名div.classList.add('MouseDiv')//初始化//这个听说是可以取消浏览器选中文字拖拽的， 但是实际上也不知道有什么用window.getSelection().removeAllRanges()//鼠标点击事件function OnMousDown(e) {//点击时， 取消之前选中的divfor (let i = 0; i < divs.length; i++) {divs[i].style.backgroundColor = '#00FF00'}//将定义好的div添加到body中， 实现鼠标按住有个可视化选区body.appendChild(div)//当点击时， 记录点击的位置ClientLeft = OffsetLeft = e.clientXClientTop = OffsetTop = e.clientY//给body添加鼠标移动事件body.addEventListener('mousemove', OnMousOver)return false}//鼠标抬起时事件function OnMousUp() {//当鼠标台起时， div的样式清零， 这个div是创建的虚拟divdiv.style.width = 0 + 'px'div.style.height = 0 + 'px'//然后进行删除div.remove()//移除鼠标移动事件body.removeEventListener('mousemove', OnMousOver)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'div.style.top = (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 = ''div.style.top = (ClientTop) + 'px'div.style.width = (e.clientX - ClientLeft) + 'px'div.style.height = (e.clientY - ClientTop) + 'px'}if (ClientTop > e.clientY) {//鼠标往上时//左上和右上div.style.top = ''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))//右边判断&&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>

JavaScript按住鼠标左键选中元素，实现框选（Rubberband）效果相关推荐

JavaScript获取鼠标左键选中的内容
function f(){ var choose = rangy.getSelection().toString(); document.getElementById("t1"). ...
vue2 实现鼠标左键拖拽实现框选功能
一.实现如图所示功能二.鼠标mousedown事件和click事件重复,不设置click事件可以达到相同效果 // 代码如下 <template><el-dialogtitle=& ...
VScode无法只按住鼠标左键选取多行
原因:Pinyin输入法与VScode冲突解决1:改为系统自带的英语(美国)输入法或其他输入法解决2:按下左侧的ctrl+shift 参考链接 [VScode] VScode无法只按住鼠标左键选取 ...
Python-OpenCV按住鼠标左键绘制图形
使用Python语言的OpenCV库,在按住鼠标左键的情况下,移动鼠标,绘制任意形状的图形 event判断鼠标是否是移动状态(event == cv.EVENT_MOUSEMOVE),flags判断鼠 ...
前端html+css： 3D滚动正方体————按住鼠标左键即可拖动
如图所示代码如下 <!doctype html> <html lang="en"> <head><meta charset=" ...
vue3实现鼠标左键拖拽画矩形框框选功能
vue3 + elementuiPlus 实现鼠标左键拖拽画矩形框框选列表功能,仿照桌面框选功能效果如图: vue3鼠标框选代码: <template><div class=& ...
html判断按键按下,javascript如何判断鼠标左键是否被按下？
怎么在javascript中判断鼠标左键是否被按下?下面本篇文章就来给大家介绍一下使用javascript判断鼠标左键是否被按下的方法,希望对大家有所帮助. 在javascript中,可以通过Even ...
检测单击鼠标左键并拖动的消息_3-75 通过鼠标选择文本
通过鼠标选择文本时,根据选中文本内容的多少,可将选择文本分为以下几种情况. 1 将光标插入点定位到需要选择的文本起始处,然后按住鼠标左键不放并拖动,直至需要选择的文本结尾处释放鼠标即可选中文本,选中的 ...
511遇见易语言大漠模块制作鼠标左键右键单击双击
本机视频封装的命令是大漠键鼠中的以下命令:LeftClick().LeftDoubleClick().LeftDown().LeftUp().MiddleClick().MiddleDown().Mi ...
Javascript如何判断按下的是鼠标左键还是右键
Javascript如何判断按下的是鼠标左键还是右键一.需求:在页面上某个元素上点击鼠标右键,弹出二级悬窗(右键菜单). 二.解决技术问题:如何监听鼠标右键事件三.解决方案: 1.使用jquer ...

JavaScript按住鼠标左键选中元素，实现框选（Rubberband）效果

JavaScript按住鼠标左键选中元素，实现框选（Rubberband）效果相关推荐

最新文章

热门文章

JavaScript按住鼠标左键选中元素， 实现框选（Rubberband）效果

JavaScript按住鼠标左键选中元素， 实现框选（Rubberband）效果相关推荐

最新文章

热门文章

JavaScript按住鼠标左键选中元素，实现框选（Rubberband）效果

JavaScript按住鼠标左键选中元素，实现框选（Rubberband）效果相关推荐