Vue项目封装div拖动组件，实现div拖拽

场景：在pc端项目中会碰到弹框后多个页面重叠的场景，类似于电脑打开多个文件夹，这时想要同时完整的展示两个页面的内容，就可以拖动页面，改变位置

很多教程都是使用自定义方法在单个组件中使用，本文带大家在Vue项目中封装一个拖拽div的方法，注册全局使用

实现步骤：

1. 在src下的util文件夹下创建 drag.js文件，存放实现拖拽效果的代码

export default (Vue) => {
  Vue.directive("drags", {
    inserted: function (el) {
      let oDiv = el   // 获取当前元素
      oDiv.onmousedown = (e) => {
        // 算出鼠标相对元素的位置
        let disX = e.clientX - oDiv.offsetLeft
        let disY = e.clientY - oDiv.offsetTop
        document.onmousemove = (e) => {
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY
          oDiv.style.left = left + 'px'
          oDiv.style.top = top + 'px'
        }
        document.onmouseup = (e) => {
        document.onmousemove = null
       document.onmouseup = null
        }
      }
    }
  })
}

1. 在main.js中注册方法

import directives from './util/derectives'

Vue.use(directives)

1. 使用，在需要实现拖拽的div标签上直接加上 v-drag 即可，无需再单独引入

<div v-drag></div>

到此在Vue中实现div拖拽的步骤就结束了，需要的小伙伴快去试试吧！