vue3 拖拽插件（drag）
前端vue项目中，经常会有弹框拖拽的需求，下面介绍常用方法：
1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可，代码如下：
<el-dialogv-model="showDiloag"width="500"draggable></e--dialog>
2.如果不使用ele 的组件，自己写弹框，那么可以自定义指令，代码如下(vue3)：
drag.js文件：
const drag = {mounted(el, binding) {el.style.position = "absolute";const data = binding.value || { x: 0, y: 0, zIndex: 99999 };let { x, y, zIndex = 99999 } = data;el.style.left = x + "px";el.style.top = y + "px";el.style.zIndex = zIndex;let isDragging = false;let baseMousePosition = { x: 0, y: 0 };let dom = data.targetRef || document.getElementById(data.targetId) || el;dom.style.cursor = "move";const onDragStart = (e) => {if (e.button === 0) {isDragging = true;baseMousePosition.x = e.pageX;baseMousePosition.y = e.pageY;window.addEventListener("mousemove", onDraging);}};const onDragEnd = (e) => {isDragging = false;x = parseInt(el.style.left);y = parseInt(el.style.top);window.removeEventListener("mousemove", onDraging);};const onDraging = (e) => {if (isDragging) {el.style.left = e.pageX - baseMousePosition.x + x + "px";el.style.top = e.pageY - baseMousePosition.y + y + "px";}};dom.addEventListener("mousedown", onDragStart);window.addEventListener("mouseup", onDragEnd);},
};const directives = {install: function (app) {app.directive('drag', drag)}
}
export default directives
vue文件使用：
<script setup>
import { ref } from "vue";const dragRef = ref()
const dragOptions= ref({x: 100,y: 200,targetRef: dragRef,
})
</script><template><div v-drag="dragOptions" class="dialog"><div class="dialog_header" ref="dragRef">弹框标题</div><div class="dialog_content">弹框内容</div></div><template>
这里的dragOptions就是配置项，x和y是弹框的初始位置的left和top值，targetRef的值是你希望鼠标在哪个dom元素可以拖拽，如果不传，就默认在整个弹框范围，都可以拖拽。