使用很簡單，直接

<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;};