Vue自定义指令实现拖拽（pc端）

前言

大家好，我是尤雨海。。。。。。

每次写自定义拖拽指令觉得从头写太麻烦，我自己的上传了一个简单的npm包，大家可以用一下。这是网址：
https://www.npmjs.com/package/@zhengkang1/lib-drags

一、主要思想

1.指令插入元素时使该元素脱离文档流

el.style.position = 'absolute'

2. 获取拖拽的dom元素，在el.onmousedown事件内获取鼠标相对dom元素本身的位置：

    const {
      ox,
      oy
    } = {
      ox: e.clientX - el.offsetLeft,
      oy: e.clientY - el.offsetTop
    }

3.再通过document.onmousemove事件计算dom元素左上角相对 视口的距离：

  const {
        left,
        top
      } = {
        left: em.clientX - ox,
        top: em.clientY - oy
      }

二、完整代码

Vue.directive('drag', function (el) {
  el.style.position = 'absolute'
  // 监听 当前绑定指令元素的鼠标点下去的事件
  el.onmousedown = function (e) {
    console.log(e);
    const {
      ox,
      oy
    } = {
      ox: e.clientX - el.offsetLeft,
      oy: e.clientY - el.offsetTop
    }
    // 监听鼠标来回移动的事件
    document.onmousemove = function (em) {
      const {
        left,
        top
      } = {
        left: em.clientX - ox,
        top: em.clientY - oy
      }
      // 将鼠标 换成小手
      el.style.cursor = 'pointer'
      // 和盒子的定位 改变left 和 top的值
      el.style.left = left + 'px'
      el.style.top = top + 'px'
    }
    // 监听鼠标抬起的事件
    document.onmouseup = function (eu) {
      document.onmousemove = null
      el.style.cursor = 'default'
    }
  }
})