项目开发过程中我们通常会遇到需要到一些弹窗鼠标可以随意拖动位置去放置，vue里面直接通过封装对应的指令即可，于是封装了一个出来，希望可以用到。
Vue.directive('draggable-dom', draggableDom);
组件节点添加对应指令就可以
v-draggable-dom="{zIndex: 999, top: 10, left: 50}"
<div class="search-bar" ref="seachBar" :style="{ width }" v-draggable-dom="{zIndex: 999, top: 10, left: 50}">
指令代码：
/*** 拖拽元素指令* @param { Number } top // 初始位置top 坐标 默认为元素本身的top* @param { Number } left // 初始位置left 坐标 默认为元素本身的left* @param { Number } zIndex // 层级，默认为9999*/
export const draggableDom = {bind(el, binding, vnode) {// 初始化变量let startX = 0; // 鼠标按下时的初始 X 坐标let startY = 0; // 鼠标按下时的初始 Y 坐标let initialLeft = 0; // 元素的初始 left 值let initialTop = 0; // 元素的初始 top 值let isDragging = false; // 拖拽状态if (binding.value?.position) {e.style.position = binding.value?.position;}// 如果属性定位没有的时候则设置绝对定位const position = window.getComputedStyle(el);if (!position || position == 'static') {e.style.position = "absolute";}// el.style.cursor = "move"; // 设置鼠标样式为移动图标// 默认层级，默认为9999el.style.zIndex = binding?.value?.zIndex || 9999;// 传入top值if (binding.value?.top) {// let top = el.getBoundingClientRect().top;let top = binding.value?.top;el.style.top = `${top}px`;}// 传入left值if (binding.value?.left) {// let left = el.getBoundingClientRect().left;let left = binding.value?.left;el.style.left = `${left}px`;}// 鼠标按下事件处理函数const onMouseDown = (event) => {// 防止文本选择// event.preventDefault();// 记录初始鼠标位置和元素位置startX = event.clientX;startY = event.clientY;initialLeft = el.offsetLeft;initialTop = el.offsetTop;isDragging = true; // 开启拖拽状态// 监听 mousemove 和 mouseup 事件document.addEventListener("mousemove", onMouseMove);document.addEventListener("mouseup", onMouseUp);};// 鼠标移动事件处理函数const onMouseMove = (event) => {if (!isDragging) return; // 如果未处于拖拽状态，直接返回// 计算鼠标的位移const moveX = event.clientX - startX;const moveY = event.clientY - startY;// 更新元素的位置el.style.left = initialLeft + moveX + "px";el.style.top = initialTop + moveY + "px";};// 鼠标松开事件处理函数const onMouseUp = () => {isDragging = false; // 关闭拖拽状态// 移除事件监听器document.removeEventListener("mousemove", onMouseMove);document.removeEventListener("mouseup", onMouseUp);};// 绑定 mousedown 事件el.style.position = "absolute"; // 确保元素是绝对定位el.addEventListener("mousedown", onMouseDown);},// 解绑指令unbind(el) {// 移除 mousedown 事件监听器el.removeEventListener("mousedown", onMouseDown);},
};
