vue自定义指令实现拖拽

创建拖拽的自定义指令，然后在main.js里面注册到全局即可。

import Vue from 'vue'; const drag = Vue.directive('drag', {     // 指令绑定到元素上回立刻执行bind函数，只执行一次     bind: function (el) {      },     //inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次     inserted: function (el) {         // console.log(e.parentNode)         // let el = e.parentNode;         // let el = e;         let wMax = document.documentElement.clientWidth - el.offsetWidth;         let hMax = document.documentElement.clientHeight - el.offsetHeight;          if ("ontouchstart" in window) { // 移动端             el.ontouchstart = function (e) {                 let time1 = new Date().getTime();                 let x = e.touches[0].pageX - el.offsetLeft;                 let y = e.touches[0].pageY - el.offsetTop;                 // 抑制浏览器端默认拖拽行为，移动端是拖拽屏幕，pc端无                 // e.preventDefault(); 开启后点击 子集点击事件事件会无效                 document.ontouchmove = function (e) {                     let time2 = new Date().getTime();                     if (time2 - time1 > 300) {                         el.classList.remove('v-drag-inactive')                         el.classList.add('v-drag-active')                     }                     let left = e.touches[0].pageX - x;                     let top = e.touches[0].pageY - y;                      if (left < 0) left = 0;                     else if (left > wMax) left = wMax;                      if (top < 0) top = 0;                     else if (top > hMax) top = hMax;                      el.style.left = left + 'px';                     el.style.top = top + 'px';                 }                 document.ontouchend = function () {                     let time2 = new Date().getTime();                     if (time2 - time1 > 300) {                         el.classList.remove('v-drag-active')                         el.classList.add('v-drag-inactive')                     }                      document.ontouchmove = document.ontouchend = null;                 }             }         } else { // pc端             el.onmousedown = function (e) {                                  let time1 = new Date().getTime();                 let x = e.pageX - el.offsetLeft;                 let y = e.pageY - el.offsetTop;                 document.onmousemove = function (e) {                     e.preventDefault();                     let time2 = new Date().getTime();                     if (time2 - time1 > 300) {                         el.classList.remove('v-drag-inactive')                         el.classList.add('v-drag-active')                     }                     el.style.left = e.pageX - x + 'px';                     el.style.top = e.pageY - y + 'px';                 }                 document.onmouseup = function () {                     let time2 = new Date().getTime();                     if (time2 - time1 > 300) {                         el.classList.remove('v-drag-active')                         el.classList.add('v-drag-inactive')                     }                     document.onmousemove = document.onmouseup = null;                 }             }         }       },     updated: function (el) {     } }) export default drag; 

如果需要拖拽顶部则需要把指令写在需要的div上，然后在inserted里面获取父节点的事件即可（可根据场景来选择）

inserted: function (e) {         console.log(e.parentNode)         let el = e.parentNode;         let wMax = document.documentElement.clientWidth - el.offsetWidth;         let hMax = document.documentElement.clientHeight - el.offsetHeight;         .................................此处代码省略，和上面一样         // 这里的点击事件用拖拽的事件e 而不是父节点的事件el         e.onmousedown = function (e) {                                  let time1 = new Date().getTime();                 let x = e.pageX - el.offsetLeft;                 let y = e.pageY - el.offsetTop;                 document.onmousemove = function (e) {                     e.preventDefault();                     let time2 = new Date().getTime();                     if (time2 - time1 > 300) {                         el.classList.remove('v-drag-inactive')                         el.classList.add('v-drag-active')                     }                     el.style.left = e.pageX - x + 'px';                     el.style.top = e.pageY - y + 'px';                 }           }            ................................此处代码省略 ，和上面一样     }