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

最新推荐文章于 2023-01-03 11:25:51 发布
最新推荐文章于 2023-01-03 11:25:51 发布
阅读量3k 收藏 12
点赞数
分类专栏： JS 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45615791/article/details/104524950
版权

效果图：

代码如下：

<!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 DOM
			const div = document.createElement('div')
			const title = document.querySelector('.title')
			const body = document.body
			let ClientLeft, ClientTop, OffsetLeft, OffsetTop = null
			let addLength = []
			//给DIV添加CLass名
			div.classList.add('MouseDiv')
			//初始化
			//这个听说是可以取消浏览器选中文字拖拽的， 但是实际上也不知道有什么用
			window.getSelection().removeAllRanges()
			//鼠标点击事件
			function OnMousDown(e) {
				//点击时， 取消之前选中的div
				for (let i = 0; i < divs.length; i++) {
					divs[i].style.backgroundColor = '#00FF00'
				}
				//将定义好的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'
				//然后进行删除
				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>

 

Leisure_Time
关注
  • 0
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 table 按住鼠标左键范围框选v2（选择逻辑优化，框选有值颜色不变，清空框选样式不变）
oMangGuoBuDing1的专栏
05-24 278
【代码】vue3 table 按住鼠标左键范围框选v2（选择逻辑优化，框选有值颜色不变，清空框选样式不变）
js按住鼠标左键选中元素框代码.zip
07-04
js按住鼠标左键选中元素框代码是一款点击鼠标左键长按区域选择元素框。
按住鼠标左键选中区域元素框js代码.zip
07-05
按住鼠标左键选中区域元素框js代码是一款点击鼠标左键长按区域选择元素框的js网页特效。
js框选功能（vue）
【IOS】swiper左右滑动时禁止页面上下滚动
07-19 1673
实现效果 实现逻辑 绘制区域 判断有多少控件在此区域，进行拖拽操作 布局 父容器page-design 设置position：relative，id为rectangular的框选盒子设置 position:absolute; display:none。 js实现框选效果 给父容器page-design绑定mousedown事件 在鼠标按下事件mousedown 记录起始坐标，及起始上边距与下边距，并监听鼠标移动的事件及松开的事件。 在鼠标移动mousemove事件中记录当前位置的坐标及相对父容
js 拉框选中多个元素
jazywoo_在路上
07-01 1292
看到云盘里，使用js实现鼠标拉卡un个
js纯原生实现div画框+多选+框选canvas内容+跨屏选
zero77ld的博客
09-12 1292
新需求需要在canvas画布上实现框选及对框选中的数据进项操作 以下代码实现框选及多选 // main画布事件监听,框选 function mainMarqueeMousedown (e) { if (e.button !== 0) return // 判断是否多选 if (!e.ctrlKey) { // 容纳marqueeDOM的盒子 marqueeBoxDOM.innerHTML = '' // 储存marquee坐标数组 mar
js拖动(点击+移动)全方位拉出矩形
weixin_43478869的博客
11-08 1236
实现鼠标点击按下拉动，可以全方位移拉出矩形。  代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;拉框&lt;/title&gt; &lt;style type="text/css&
如何用JS实现网页上通过鼠标移动批量选择元素？
qq_34211600的博客
11-12 1528
如何用JS实现网页上通过鼠标移动批量选择元素？
JS元素选择方法
Revin的博客
01-08 1552
JS元素选择方法
selenium的元素定位-鼠标事件
dianhengqu2002的博客
07-12 665
鼠标事件 ActionChains 类提供了鼠标操作的常用方法： perform()： 执行所有 ActionChains 中存储的行为； context_click()： 右击； double_click()： 双击； drag_and_drop(source, target)： 拖动； move_to_element()： 鼠标悬停 参...
js怎么模拟选择框选择事件
weixin_35756130的博客
01-03 618
如果要在 JavaScript 中模拟选择框选择事件，可以使用如下方法： 获取选择框元素。 使用 element.value 属性设置选择框的值。 使用 element.dispatchEvent 方法派发一个 change 事件。 示例代码如下： const select = document.querySelector('#my-select'); select.value = 'opt...
原生js按住鼠标左键方框选中效果
09-22
原生js按住鼠标左键方框选中效果
JavaScript_元素跟随鼠标在指定区域运动
weixin_44500833的博客
06-01 219
元素跟随鼠标在指定区域运动 参考大神代码：javascript元素跟随鼠标在指定区域运动 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css"> * { margin: 0;
js实现矩形框选
qq_38892819的博客
06-22 4814
"http://www.w3.org/TR/html4/strict.dtd"> 鼠标框选效果   *{   padding:0;   margin:0;   }   #bottom{   position:absolute;   bottom:0px;   width:100%;   height:40px;   border:1px solid #000;
JavaScript获取鼠标左键选中的内容
WRL011437的博客
12-28 584
function f(){ var choose = rangy.getSelection().toString(); document.getElementById("t1").innerHTML=choose; }; 转载于:https://www.cnblogs.com/zyqBlog/p/5084260.html
鼠标拖动画框选中并添加到另一个div效果
黎小小的博客
08-16 825
需求：鼠标按下后，显示div用于放置所有的li；当鼠标框选住li，并抬起鼠标时，所有的li放进div中 思路： 先移动鼠标生成画框； 将生成的画框和已有的li进行碰撞，如果碰到了，就设置active，没有就清除active； 在鼠标放开时，找到所有为active的li，将其appendChild进div中 问题： 不能直接碰撞时，直接appendChild到div中，会将后面的li全部添...
原生js模拟框选选择效果
CodingNoob
10-18 913
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Js 可视化框选Dom元素，Xpath路径变更Dom元素
qq_37203082的博客
09-28 974
应用于可视化埋点需求，需要一个JS能够通过框选 获取页面的DOM元素 且记录Xpath路径，用于后续对Dom进行后续的操作 简单做了Demo，后续继续优化 <!doctype html> <html> <head> <title>Js 可视化圈选Dom元素，Xpath路径变更Dom</title> <style> * { margin: 0; pa.
JavaScript实现框选效果
weixin_30699443的博客
06-30 99
<html> <head> <title>region</title> <style> body { margin: 0; padding: 0; } #selectContainer { positio...
qgraphicsview qt 设置右键框选只画框不选中
最新发布
04-28
要实现只画框不选中的右键框选功能，可以通过以下步骤来实现： 1. 重载 `QGraphicsView` 的 `mousePressEvent` 和 `mouseReleaseEvent` 函数，记录鼠标按下和释放的位置，并在这两个位置之间绘制一个矩形框选区域。 2. 在 `mouseReleaseEvent` 中获取框选区域内的所有图形项，但不进行选中操作。 下面是一个简单的示例代码： ```cpp class MyGraphicsView : public QGraphicsView { public: MyGraphicsView(QWidget *parent = nullptr) : QGraphicsView(parent) {} protected: void mousePressEvent(QMouseEvent *event) override { if (event->button() == Qt::RightButton) { rubberBandStartPos = event->pos(); rubberBand = new QRubberBand(QRubberBand::Rectangle, this); rubberBand->setGeometry(QRect(rubberBandStartPos, QSize())); rubberBand->show(); } QGraphicsView::mousePressEvent(event); } void mouseReleaseEvent(QMouseEvent *event) override { if (event->button() == Qt::RightButton) { rubberBand->hide(); QRect rect = QRect(rubberBandStartPos, event->pos()).normalized(); QList<QGraphicsItem*> items = items(rect); // TODO: 处理选中的图形项 delete rubberBand; } QGraphicsView::mouseReleaseEvent(event); } private: QPoint rubberBandStartPos; QRubberBand *rubberBand = nullptr; }; ``` 在上面的代码中，我们首先在鼠标按下事件中记录了起始位置，并创建了一个 `QRubberBand` 对象，用于绘制矩形框选区域。 在鼠标释放事件中，我们获取框选区域内的所有图形项，并进行相应的处理。这里我们只是简单地将选中的图形项放到了一个 `QList` 中，你可以根据实际需求进行操作。 注意，这里我们调用了基类的 `mousePressEvent` 和 `mouseReleaseEvent` 函数，以确保其他事件的正常处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值