封装vue指令实现拖拽
封装 Vue 指令实现拖拽功能
核心思路
通过 Vue 的自定义指令 (v-drag) 封装拖拽逻辑，利用鼠标事件实现元素拖拽。指令需处理 mousedown、mousemove 和 mouseup 事件，并动态更新元素位置。
实现步骤
1. 注册全局指令
在 Vue 项目的入口文件（如 main.js）或单独模块中注册指令：
Vue.directive('drag', {
bind(el, binding) {
let isDragging = false;
let offsetX, offsetY;
el.style.position = binding.value?.position || 'absolute';
el.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - el.getBoundingClientRect().left;
offsetY = e.clientY - el.getBoundingClientRect().top;
e.preventDefault(); // 防止文本选中
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
el.style.left = `${e.clientX - offsetX}px`;
el.style.top = `${e.clientY - offsetY}px`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
}
});2. 使用指令
在组件中直接使用 v-drag 指令，可通过参数配置初始位置或限制范围：
<template>
<div v-drag="{ position: 'fixed', boundary: { minX: 0, minY: 0 } }" class="draggable-box">
拖拽我
</div>
</template>3. 进阶功能扩展
- 边界限制：在
mousemove事件中检查元素是否超出父容器或指定区域。 - 拖拽回调：通过指令的
binding.value传递回调函数，在拖拽结束时触发事件。 - 触摸支持：添加
touchstart、touchmove和touchend事件处理移动端拖拽。
注意事项
- 拖拽元素需设置
position: absolute/fixed，否则left/top属性无效。 - 事件监听需在
document上处理，避免鼠标快速移动时脱离元素。 - 移动端需额外处理触摸事件，并考虑
passive: true优化性能。
通过以上方法，可以快速实现一个可复用的 Vue 拖拽指令，并根据需求扩展功能。
