###
鼠标左键框选功能与整体
拖拽实现原理
在
Vue3 中实现
鼠标左键框选功能以及支持
选中元素的整体
拖拽，需要结合事件监听、DOM 操作和状态管理来完成。以下是实现的核心原理和技术
点：
1. **框选区域的创建**：通过监听
鼠标的按下 (`mousedown`) 和移动 (`mousemove`) 事件，在画布上动态生成一个透明的 `div`
元素作为框选区域。
2. **
元素检测**：在
鼠标释放 (`mouseup`)
时，检查框选区域内有哪些目标
元素，并将这些
元素标记为
选中状态[^1]。
3. **整体
拖拽**：为
选中的
元素绑定
拖拽逻辑，当用户按下
鼠标并移动
时，更新所有
选中元素的位置[^2]。
以下是完整的实现代码示例：
```
vue
<template>
<div class="container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp">
<div
v-for="(item, idx) in list"
:key="idx"
class="item"
:style="{ left: item.x + &#
39;px&#
39;, top: item.y + &#
39;px&#
39; }"
:class="{ selected: item.selected }"
@mousedown.stop="handleItemMouseDown(item)"
>
{{ item.name }}
</div>
<div v-if="isSelecting" class="selection-box" :style="{ left: selectionStartX + &#
39;px&#
39;, top: selectionStartY + &#
39;px&#
39;, width: selectionWidth + &#
39;px&#
39;, height: selectionHeight + &#
39;px&#
39; }"></div>
</div>
</template>
<script>
import { ref, reactive } from "
vue";
export default {
setup() {
const list = reactive([
{ name: "Item 1", x: 50, y: 50, selected: false },
{ name: "Item 2", x: 150, y: 50, selected: false },
{ name: "Item
3", x: 50, y: 150, selected: false },
{ name: "Item 4", x: 150, y: 150, selected: false },
]);
const isSelecting = ref(false);
const selectionStartX = ref(0);
const selectionStartY = ref(0);
const selectionEndX = ref(0);
const selectionEndY = ref(0);
const handleMouseDown = (e) => {
if (e.button !== 0) return; // 只处理左键
isSelecting.value = true;
selectionStartX.value = e.clientX;
selectionStartY.value = e.clientY;
selectionEndX.value = e.clientX;
selectionEndY.value = e.clientY;
};
const handleMouseMove = (e) => {
if (!isSelecting.value) return;
selectionEndX.value = e.clientX;
selectionEndY.value = e.clientY;
};
const handleMouseUp = () => {
if (!isSelecting.value) return;
isSelecting.value = false;
const rect = {
left: Math.min(selectionStartX.value, selectionEndX.value),
right: Math.max(selectionStartX.value, selectionEndX.value),
top: Math.min(selectionStartY.value, selectionEndY.value),
bottom: Math.max(selectionStartY.value, selectionEndY.value),
};
list.forEach((item) => {
const itemRect = {
left: item.x,
right: item.x + 50, // 假设每个
元素宽高为50
top: item.y,
bottom: item.y + 50,
};
item.selected = !(rect.right < itemRect.left || rect.left > itemRect.right || rect.bottom < itemRect.top || rect.top > itemRect.bottom);
});
};
const handleItemMouseDown = (item) => {
if (!item.selected) return;
const startX = item.x;
const startY = item.y;
const onMouseMove = (e) => {
item.x = startX + e.movementX;
item.y = startY + e.movementY;
};
const onMouseUp = () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
};
return {
list,
isSelecting,
selectionStartX,
selectionStartY,
selectionWidth: computed(() => Math.abs(selectionEndX.value - selectionStartX.value)),
selectionHeight: computed(() => Math.abs(selectionEndY.value - selectionStartY.value)),
handleMouseDown,
handleMouseMove,
handleMouseUp,
handleItemMouseDown,
};
},
};
</script>
<style>
.container {
position: relative;
width: 400px;
height: 400px;
border: 1px solid #ccc;
overflow: hidden;
}
.item {
position: absolute;
width: 50px;
height: 50px;
background-color: lightblue;
cursor: move;
}
.item.selected {
background-color: lightgreen;
}
.selection-box {
position: absolute;
border: 1px dashed red;
pointer-events: none;
}
</style>
```
### 实现细节说明
- **框选区域动态生成**：通过 `mousedown` 和 `mousemove` 事件计算框选区域的起
点和终
点，动态调整其大小和位置。
- **
元素检测**：在 `mouseup` 事件中，根据框选区域的坐标范围，判断哪些
元素被包含在内，并将其标记为
选中状态。
- **整体
拖拽**：为
选中的
元素绑定
拖拽事件，当用户移动
鼠标时，更新所有
选中元素的位置[^2]。
---
###
扫一扫
3846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
