前段 div 移动

1 创建js 文件 

candrag.js

export default {
  // 定义 Vue 插件
  install(Vue) {
    Vue.directive('candrag', { // 全局指令名为 v-candrag
      inserted(el) {
        el.onmousedown = function (ev) {
          // 获取鼠标按下时的偏移量（鼠标位置 - 元素位置）
          const disX = ev.clientX - el.offsetLeft
          const disY = ev.clientY - el.offsetTop
          document.onmousemove = function (ev) {
          	  // 获取鼠标实时移动时，元素的位置（鼠标实时位置 - 偏移量）
              const l = ev.clientX - disX
              const t = ev.clientY - disY
			  // 实时设置元素位置
              el.style.left = l + 'px'
              el.style.top = t + 'px'
          }
          document.onmouseup = function () {
              // 鼠标抬起时，销毁移动事件和鼠标抬起事件
              document.onmousemove = null
              document.onmouseup = null
          }
        }
      }
    })
  }
}

2 mian.js  全局挂载

import candrag from '@/utils/candrag.js' // 引入插件

// 使用插件
Vue.use(candrag)

3 放到div 上

ref="dragBox" v-candrag