vue系列--vue封装拖拽指令v-drag

1.首先将下面的代码引入代码中

export const initVDrag = (Vue) => {Vue.directive("drag", (el) => {const oDiv = el // 当前元素const minTop = oDiv.getAttribute("drag-min-top")const ifMoveSizeArea = 20oDiv.onmousedown = (e) => {let target = oDivwhile (window.getComputedStyle(target).position !== "absolute" &&target !== document.body) {target = target.parentElement}document.onselectstart = () => {return false}if (!target.getAttribute("init_x")) {target.setAttribute("init_x", target.offsetLeft)target.setAttribute("init_y", target.offsetTop)}const initX = parseInt(target.getAttribute("init_x"))const initY = parseInt(target.getAttribute("init_y"))// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - target.offsetLeftconst disY = e.clientY - target.offsetTopdocument.onmousemove = (e) => {// 通过事件委托，计算移动的距离// 因为浏览器里并不能直接取到并且使用clientX、clientY,所以使用事件委托在内部做完赋值const l = e.clientX - disXconst t = e.clientY - disY// 计算移动当前元素的位置，并且给该元素样式中的left和top值赋值target.style.left = l + "px"// target.style.top = (t < minTop ? minTop : t) + "px"target.style.top = t + "px"if (Math.abs(l - initX) > ifMoveSizeArea ||Math.abs(t - initY) > ifMoveSizeArea) {target.setAttribute("dragged", "")} else {target.removeAttribute("dragged")}}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = nulldocument.onselectstart = null}// return false不加的话可能导致黏连，拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false}})
}

2.在main.js中

import {initVDrag} from "directives/dragscroll";
initVDrag(Vue)