js实现鼠标拖拽多选功能

已于 2024-05-23 11:21:05 修改
阅读量1k 收藏 23
点赞数 18
文章标签： javascript vue html5 css vue.js html
于 2024-05-20 12:03:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longlongValue/article/details/139061216
版权

实现功能
在PC端的H5页面中，客户拖动鼠标可以连选多个选项

效果展示
在这里插入图片描述

具体代码如下

<!DOCTYPE html>
<html>

<head>
	<title>鼠标拖拽多选功能</title>
	<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
	<style type="text/css">
		* {
			box-sizing: border-box;
		}

		ul {
			width: 500px;
			height: auto;
			margin: 0;
			padding: 20px;
			font-size: 0;
			/*需设置定位*/
			position: relative;
		}

		li {
			width: 70px;
			height: 70px;
			padding: 0;
			display: inline-block;
			vertical-align: top;
			font-size: 13px;
			border: 1px solid #d9d9d9;
		}

		#moveSelected {
			position: absolute;
			background-color: blue;
			opacity: 0.3;
			border: 1px dashed #d9d9d9;
			top: 0;
			left: 0;
		}

		.selected {
			background-color: pink;
		}
	</style>
</head>

<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
		<li>21</li>
		<li>22</li>
		<!-- 鼠标拖拽出的遮罩 （定位为  position:absolute）-->
		<!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
		<div id="moveSelected"></div>
	</ul>
</body>

</html>
<script type="text/javascript">
	$(document).ready(function () {
		let moveSelected = $('#moveSelected')[0];
        console.log(moveSelected);
		let flag = false; //是搜开启拖拽的标志
		let oldLeft = 0; //鼠标按下时的left,top
		let oldTop = 0;
		let selectedList = []; //拖拽多选选中的块集合

		// 鼠标按下时开启拖拽多选，将遮罩定位并展现
		$(".list").mousedown(function (event) {
			flag = true;
			moveSelected.style.top = event.pageY + 'px';
			moveSelected.style.left = event.pageX + 'px';
			oldLeft = event.pageX;
			oldTop = event.pageY;
			event.preventDefault(); // 阻止默认行为
			event.stopPropagation(); // 阻止事件冒泡
		});
		// 鼠标移动时计算遮罩的位置，宽 高
		$(".list").mousemove(function (event) {
			if (!flag) return; //只有开启了拖拽，才进行mouseover操作
			if (event.pageX < oldLeft) { //向左拖
				moveSelected.style.left = event.pageX + 'px';
				moveSelected.style.width = (oldLeft - event.pageX) + 'px';
			} else {
				moveSelected.style.width = (event.pageX - oldLeft) + 'px';
			}
			if (event.pageY < oldTop) { //向上
				moveSelected.style.top = event.pageY + 'px';
				moveSelected.style.height = (oldTop - event.pageY) + 'px';
			} else {
				moveSelected.style.height = (event.pageY - oldTop) + 'px';
			}
			event.preventDefault(); // 阻止默认行为
			event.stopPropagation(); // 阻止事件冒泡
		});
		//鼠标抬起时计算遮罩的right 和 bottom，找出遮罩覆盖的块，关闭拖拽选中开关，清除遮罩数据
		$(".list").mouseup(function (event) {
			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';
			findSelected();
			flag = false;
			clearDragData();
			event.preventDefault(); // 阻止默认行为
			event.stopPropagation(); // 阻止事件冒泡
		});
		$(".list").mouseleave(function (event) {
			flag = false;
			moveSelected.style.width = 0;
			moveSelected.style.height = 0;
			moveSelected.style.top = 0;
			moveSelected.style.left = 0;
			event.preventDefault(); // 阻止默认行为
			event.stopPropagation(); // 阻止事件冒泡
		});

		function findSelected() {
			let blockList = $('.list').find('li');
			for (let i = 0; i < blockList.length; i++) {
				//计算每个块的定位信息
				let left = $(blockList[i]).offset().left;
				let right = $(blockList[i]).width() + left;
				let top = $(blockList[i]).offset().top;
				let bottom = $(blockList[i]).height() + top;

				let leftTwo = moveSelected.style.left.split('px')[0]
				let rightTwo = moveSelected.style.right.split('px')[0]
				let topTwo = moveSelected.style.top.split('px')[0]
				let bottomTwo = moveSelected.style.bottom.split('px')[0]

				// 判断碰撞
				if (!(top > bottomTwo || right < leftTwo || bottom < topTwo || left> rightTwo)) {
					// 碰撞的情况
					selectedList.push(blockList[i]);
					$(blockList[i]).addClass('selected');
				}
			}
			console.log(selectedList);
		}

		function clearDragData() {
			moveSelected.style.width = 0;
			moveSelected.style.height = 0;
			moveSelected.style.top = 0;
			moveSelected.style.left = 0;
			moveSelected.style.bottom = 0;
			moveSelected.style.right = 0;
		}
	});
</script>

考虑方便使用Vue框架的情况，新增一个Vue 3的参考代码，且如果多选时处于已经选择状态也会取消选择

//
// MutiSelectPage
// mrs-console-ui
//
// Created by gaolailong on 2024/05/23.
// Copyright © 2024 上海复微迅捷数字科技股份有限公司. All rights reserved.
//

<template>
    <div class="page">
        <div class="list" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
            @mouseleave="handleMouseLeave">
            <template v-for="(item, index) in list" :key="index">
                <div class="can-select-div" :class="item.selected ? 'selected' : ''" :data-index="index">{{ item.text }}
                </div>
            </template>
            <!-- 鼠标拖拽出的遮罩 （定位为  position:absolute）-->
            <!-- 遮罩最好是在绑定了mouseover事件的元素内部，并且不要阻止遮罩的冒泡事件。这样鼠标移到了遮罩上面，依然可以利用冒泡执行父元素的mouseover事件，就不会出现遮罩只能扩大，不能缩小的情况了（亲自试过） -->
            <div id="moveSelected"></div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive } from 'vue'
export default defineComponent({
    name: 'MutiSelectPage',
    setup() {

        let moveSelected: HTMLElement | null = null
        onMounted(() => {
            moveSelected = document.getElementById('moveSelected') as HTMLElement;
        })

        const list: Array<Record<string, unknown>> = reactive([])
        for (let index = 0; index < 10; index++) {
            const listItem = {
                text: index,
                selected: false
            }
            list.push(listItem)
        }

        let flag = false; //是搜开启拖拽的标志
        let oldLeft = 0; //鼠标按下时的left,top
        let oldTop = 0;
        const handleMouseDown = (event: any) => {
            // 处理鼠标按下事件
            console.log('鼠标按下');
            if (!moveSelected) return;
            flag = true;
            moveSelected.style.top = event.pageY + 'px';
            moveSelected.style.left = event.pageX + 'px';
            oldLeft = event.pageX;
            oldTop = event.pageY;
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        }
        const handleMouseMove = (event: any) => {
            // 处理鼠标移动事件的逻辑
            if (!moveSelected) return;
            if (!flag) return; //只有开启了拖拽，才进行mouseover操作
            console.log("鼠标移动了");
            if (event.pageX < oldLeft) { //向左拖
                moveSelected.style.left = event.pageX + 'px';
                moveSelected.style.width = (oldLeft - event.pageX) + 'px';
            } else {
                moveSelected.style.width = (event.pageX - oldLeft) + 'px';
            }
            if (event.pageY < oldTop) { //向上
                moveSelected.style.top = event.pageY + 'px';
                moveSelected.style.height = (oldTop - event.pageY) + 'px';
            } else {
                moveSelected.style.height = (event.pageY - oldTop) + 'px';
            }
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        }
        const handleMouseUp = (event: any) => {
            if (!moveSelected) return;
            // 处理鼠标弹起事件
            console.log('鼠标弹起');
            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';
            findSelected();
            flag = false;
            clearDragData();
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        }
        const handleMouseLeave = (event: any) => {
            console.log('鼠标离开元素');
            if (!moveSelected) return;
            flag = false;
            moveSelected.style.width = '0';
            moveSelected.style.height = '0';
            moveSelected.style.top = '0';
            moveSelected.style.left = '0';
            event.preventDefault(); // 阻止默认行为
            event.stopPropagation(); // 阻止事件冒泡
        }

        function findSelected() {
            if (!moveSelected) return;
            let leftTwo = Number(moveSelected.style.left.split('px')[0])
            let rightTwo = Number(moveSelected.style.right.split('px')[0])
            let topTwo = Number(moveSelected.style.top.split('px')[0])
            let bottomTwo = Number(moveSelected.style.bottom.split('px')[0])
            // 使用ref获取dom有一个奇怪的现象，手动切换按天/按周时，ref获取到的值不会丢失之前的数据。除非点击外部的“确认查询”按钮。
            const blockList = document.getElementsByClassName('can-select-div')
            // console.log(blockList) // 访问DOM元素
            for (let i = 0; i < blockList.length; i++) {
                //计算每个块的定位信息
                let left = (blockList[i] as HTMLDivElement).offsetLeft;
                let right = (blockList[i] as HTMLDivElement).offsetWidth + left;
                let top = (blockList[i] as HTMLDivElement).offsetTop;
                let bottom = (blockList[i] as HTMLDivElement).offsetHeight + top;

                // 通过比较两个矩形（用 aDiv 和 bDiv 表示）的位置信息来判断它们是否发生碰撞。以下是该碰撞函数的实现思路：
                // 首先，通过获取 aDiv 和 bDiv 的位置信息，分别计算它们的上边界(t1 和 t2)、右边界(r1 和 r2)、下边界(b1 和 b2)以及左边界(l1 和 l2)。
                // 接下来，通过比较这些边界信息，判断两个矩形是否发生碰撞。碰撞的情况可以通过以下四个条件中的任意一个来判断：
                // 如果矩形 aDiv 的上边界大于矩形 bDiv 的下边界，说明 aDiv 在 bDiv 的上方，没有碰撞。
                // 如果矩形 aDiv 的右边界小于矩形 bDiv 的左边界，说明 aDiv 在 bDiv 的左侧，没有碰撞。
                // 如果矩形 aDiv 的下边界小于矩形 bDiv 的上边界，说明 aDiv 在 bDiv 的下方，没有碰撞。
                // 如果矩形 aDiv 的左边界大于矩形 bDiv 的右边界，说明 aDiv 在 bDiv 的右侧，没有碰撞。
                // 如果上述条件中的任意一个不满足，那么矩形 aDiv 和 bDiv 就发生了碰撞，函数返回 true，否则返回 false 表示没有碰撞。
                // 判断碰撞
                if (!(top > bottomTwo || right < leftTwo || bottom < topTwo || left > rightTwo)) {
                    // 碰撞的情况
                    console.log('碰撞了');
                    const itemIndex = (blockList[i] as HTMLDivElement).dataset.index
                    if (!itemIndex) {
                        return
                    }
                    const item = list[Number(itemIndex)]
                    item.selected = !item.selected
                    list.splice(Number(itemIndex), 1, item)
                }
            }

        }

        const clearDragData = () => {
            if (!moveSelected) return;
            moveSelected.style.width = '0';
            moveSelected.style.height = '0';
            moveSelected.style.top = '0';
            moveSelected.style.left = '0';
            moveSelected.style.bottom = '0';
            moveSelected.style.right = '0';
        }

        return {
            handleMouseDown,
            handleMouseMove,
            handleMouseUp,
            handleMouseLeave,
            list,
        }
    }
})
</script>

<style scoped>
.page {
    box-sizing: border-box;
}

.can-select-div {
    width: 70px;
    height: 70px;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    font-size: 13px;
    border: 1px solid #d9d9d9;
}

#moveSelected {
    position: absolute;
    background-color: blue;
    opacity: 0.3;
    border: 1px dashed #d9d9d9;
    top: 0;
    left: 0;
}

.selected {
    background-color: pink;
}
</style>

参考1、参考2

longlongValue
关注
  • 18
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端js实现鼠标多选拖拽
gongliming_qd的博客
12-27 2259
<!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <style type="text/css"> * { box-sizing: border-box; }
js实现鼠标拖动div
qq_36582776的博客
03-14 1393
<body> <div id="div1" style="width: 200px;height: 200px;background-color: #444;top: 0;left: 0;position: absolute;margin: 0;"></div> <!-- margin: 0 如果不设置后面取不到 --> </body> <script type="text/javascript"> var div1=docum.
js实现鼠标拖拽多选功能示例
12-12
最近做了一个用js实现鼠标拖拽多选的功能，于是整理了一下思路，写了一个小demo： 遮罩出现： 被遮罩盖住的，即为选中的块（背景色为粉色） 下面是具体代码，注释已在文中，与大家交流。 <!DOCTYPE html> <html> <head> <title>鼠标拖拽多选功能</title> [removed][removed] <style type="text/css"> *{ box-sizing:border-box; }
js鼠标拖拽多选
战国墨竹的博客
10-11 958
js鼠标拖拽多选。
js小功能--如何实现按住shift拖拽多选div
最新发布
Z_B_L的博客
12-06 735
按住shift拖拽多选div
鼠标左键按下后拖动实现多选
06-25
MFC对话框程序，界面很多自绘按钮，鼠标左键按下后拖动可以实现多选
原生js实现拖拽功能
weixin_47450807的博客
03-09 3953
一、写在前面 如果我们想要实现拖拽的功能，必须要知道三个事件： 1、onmousedown：鼠标按下事件 2、onmousemove：鼠标移动事件 3、onmouseup：鼠标抬起事件 二、实现思路 我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标， 这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏 览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事 件和鼠标抬起事件。 三、代码 <div id="drag"&g
js选中拖曳
weixin_45942049的博客
07-29 297
Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>div{width: 100px;height: 100px;border-radius: 50px
js写的批量拖拽div
04-16
用js和jquery做的一个批量选择div，并能随意移动div，一个或多个div其选择。操作流程是先添加div然后选取所要移动的div，当div变成绿色的时候进行拖动。 是一个简单的js代码。
vue上传demo支持多选拖拽上传
08-10
vue上传demo,支持多选，拖拽上传
jquery实现鼠标拖拽选择
01-13
jquery实现鼠标拖拽，完整实现左右拖拽并且选择功能，如果感觉实用，请评论.谢谢！
gridstackjs是一款响应式可拖拽的元素组件网格布局jQuery插件
08-10
gridstack.js是一款响应式可拖拽的元素组件网格布局jQuery插件。该jQuery插件允许你创建给予Bootstarp v3的响应式可拖拽的网格布局界面，可以用于制作可拖拽的多列网格布局。并且它还可以支持触摸屏设备。
手把手教写拖拽布局插件（多选以及多选拖拽篇）
qq_23447231的博客
12-16 622
之前的拖拽缩放开发完了，但是只能单个单个操作，很多时候布局的时候是想多个元素作为一组一起移动的，所以还需要多选功能。先放效果图： 完成这个功能有几个问题需要考虑： 虚线选框怎么写 怎么判断哪些元素被虚线选框选中了 被多选的元素怎么一起移动 问题解决 1.虚线选框怎么写？ 虚线选框我直接使用的div元素配合css样式来实现。 在window上绑定mousedown、mousemove和mouseup事件。 mousedown事件记录鼠标点下的位置,并将虚线选框的定位定到这个位置。 mousemove事件
JS实现网页上通过鼠标移动批量选择元素
02-03 1766
鼠标移动，将选择框的大小（height、width）设置为鼠标移动的距离（起始点和终点的差）鼠标按下，将选择框的位置（top、left）设置为点击位置，选择框初始宽高为0。鼠标抬起，停止选择框大小跟随鼠标移动，计算与选择框发生重叠的元素。（提示：重叠计算有多种方法，可自行替换其他方法）演示代码（可复制到HTML 文件中查看）
请教如何实现多选并拖动
jackchen_01的专栏
07-18 1301
有哪位高手知道如何在dialog中实现多选，然后一齐拖动？我自己写了个编辑程序，在这过程中遇到了这种类似的问题。我已经实现了多选的功能。请指教？？？？？？我的做法是将选中的各个文件图标的rects记录到array中，记录下拖动时鼠标移动的轨迹，再进行相应的变换，但不行啊
RecyclerView 拖动/滑动多选的实现（3）
Mupceet
08-18 1462
方案二：DragSelectRecyclerView扩展的选择策略之前提到，方案二是基于方案三进行扩展的，可以看到，在 OnItemTouchListener 这一块，两者其实几乎是一模一样的。而方案二一个很好的地方，就是在几乎不修改 DragSelectTouchListener 的前提下，对其选择功能进行了强大方便的扩展。下面我将从设计的思路出发，理一理是怎样完成的。
CascaderPanel如何实现多选功能
06-12
CascaderPanel 组件实现多选功能的方法是通过在组件中添加一个多选框来实现的。具体实现步骤如下： 1. 在 CascaderPanel 组件中添加一个多选框，例如： ```html <el-checkbox v-model="multiple" @change="handleMultipleChange">多选</el-checkbox> ``` 其中，`multiple` 表示当前是否多选，`handleMultipleChange` 是多选框值改变时的回调函数。 2. 在 CascaderPanel 组件的 `data` 中添加一个 `checkedKeys` 属性，用于保存已选中的值。例如： ```js data() { return { checkedKeys: [], // ... }; } ``` 3. 在 CascaderPanel 组件中，当用户点击菜单项时，需要根据 `multiple` 属性的值来判断是单选还是多选。如果是单选，直接更新 `value` 属性；如果是多选，需要更新 `checkedKeys` 属性。例如： ```js handleItemClick(option) { if (this.multiple) { const index = this.checkedKeys.indexOf(option.value); if (index >= 0) { this.checkedKeys.splice(index, 1); } else { this.checkedKeys.push(option.value); } } else { this.$emit('input', option.value); this.$emit('change', option.value); } } ``` 在多选模式下，通过判断当前值是否已经在 `checkedKeys` 中，来实现添加或删除值的操作。 4. 在 CascaderPanel 组件中，需要根据 `multiple` 属性的值来判断是否显示已选中的值。当 `multiple` 为 `true` 时，需要通过 `checkedKeys` 属性来展示已选中的值，例如： ```html <template v-if="multiple"> <div class="el-cascader-panel__tags"> <el-tag v-for="key in checkedKeys" :key="key" closable @close="handleTagClose(key)"> {{ getCheckedNodeLabel(key) }} </el-tag> </div> </template> ``` 其中，`getCheckedNodeLabel` 函数用于获取已选中的节点的标签文本。 5. 在 CascaderPanel 组件中，需要在多选框值改变时，根据 `multiple` 属性的值来更新已选中的值。例如： ```js handleMultipleChange(value) { if (!value) { this.checkedKeys = []; } } ``` 当多选框从选中状态变为未选中状态时，需要清空已选中的值。 通过上述步骤，就可以在 CascaderPanel 组件中实现多选功能了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值