使用很简单，直接

<div v-drag><div class="header"></div><div class="content"></div>
</div>

// 自定义指令 —— 拖动div
const vDrag = {// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el: any, binding: any, vnode: any, prevVnode: any) {let oDiv = el // 当前元素oDiv.onmousedown = function (e: any) {// 鼠标按下，计算当前元素距离可视区的距离let disX = e.clientX - oDiv.offsetLeftlet disY = e.clientY - oDiv.offsetTopdocument.onmousemove = function (e) {// 通过事件委托，计算移动的距离let l = e.clientX - disXlet t = e.clientY - disY// 移动当前元素oDiv.style.left = l + 'px'oDiv.style.top = t + 'px'}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}// return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false}},
}

---

当需求改成，只有拖动元素头部才可以移动，并且只能在视口范围内移动

// 自定义指令 —— 拖动div
const vDrag = {// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el: any, binding: any, vnode: any, prevVnode: any) {let oDiv = el // 当前元素// 在oDiv中找到className为header的子元素const oDivHeader = oDiv.getElementsByClassName('header')[0]// 鼠标事件oDivHeader.onmousedown = function (e: any) {// 鼠标按下，计算当前元素距离可视区的距离let disX = e.clientX - oDiv.offsetLeft;let disY = e.clientY - oDiv.offsetTop;// 计算元素相对于视口的位置let viewportWidth = document.documentElement.clientWidth;let viewportHeight = document.documentElement.clientHeight;// 确保元素只能在视口内拖拽let maxLeft = viewportWidth - oDiv.clientWidth;let maxTop = viewportHeight - oDiv.clientHeight;document.onmousemove = function (e) {// 通过事件委托，计算移动的距离let newDisX = e.clientX - disX;let newDisY = e.clientY - disY;// 限制元素移动范围let newLeft = Math.max(Math.min(newDisX, maxLeft), 0);let newTop = Math.max(Math.min(newDisY, maxTop), 0);// 移动当前元素oDiv.style.left = newLeft + 'px';oDiv.style.top = newTop + 'px';}document.onmouseup = function (e) {document.onmousemove = nulldocument.onmouseup = null}// return false不加的话可能导致黏连，就是拖到一个地方时div粘在鼠标上不下来，相当于onmouseup失效return false}},
}

---

还是上述需求，加多个手指事件（写在 mounted 方法里）

// 手指事件let x = 0; // 记录元素拖拽时候的初始x轴位置let y = 0; // 记录元素拖拽时候的初始y轴位置oDivHeader.ontouchstart = function (es: any) {// console.log(es)// el.offsetLeft dom距离左侧的偏移量// el.offsetTop dom距离顶部的偏移量x = es.touches[0].pageX - oDiv.offsetLeft;y = es.touches[0].pageY - oDiv.offsetTop;document.ontouchmove = function (em) {let left = em.touches[0].pageX - x let top = em.touches[0].pageY - y let maxLeft = document.documentElement.clientWidth - oDiv.clientWidth;let maxTop = document.documentElement.clientHeight - oDiv.clientHeight;oDiv.style.left = Math.max(Math.min(left, maxLeft), 0) + "px";oDiv.style.top = Math.max(Math.min(top, maxTop), 0) + "px";};};el.ontouchend = function () {document.ontouchmove = null;};