vue自定义指令（拖拽）

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

创建并使用指令

在src中创建指令文件夹directives，在main.js找那个引入指令文件 drag.js，并创建全局指令

import drag from '@/directives/drag.js'
Vue.directive('drag', drag)

一、拖拽

创建拖拽文件，drag.js

let drag = {
  // 指令的定义
  bind: 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

        //绑定元素位置到positionX和positionY上面
        // this.positionX = top
        // this.positionY = left

        //移动当前元素
        odiv.style.left = left + 'px'
        odiv.style.top = top + 'px'
      }
      document.onmouseup = (e) => {
        console.log(e)
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  },
}
export default drag