vue2 自定义指令实现可移动模态框效果

此效果通过 vue 指令方式实现任意元素可拖拽移动。
参考官网指令介绍 https://v2.cn.vuejs.org/v2/guide/custom-directive.html

• 在 drag.js 文件中使用 Vue.directive() 注册一个全局自定义指令 v-drag

  import Vue from 'vue';
  // 1.参数一：指令的名称，定义时指令前面不需要写v-
  // 2.参数二：是一个对象，该对象中有相关的操作函数
  // 3.在调用的时候必须加v-
  const drag = Vue.directive('drag', {
      // 每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  	// binding 是一个对象，包含 name（指令名，不包括 v- 前缀）、value（指令的绑定值）、arg（传给指令的参数）等参数
  
  	// 只调用一次，指令第一次绑定到元素时调用
      bind: function (el) { },
      // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
      inserted: function (el, binding) {
          el.onmousedown = function (e) {
              var disx = e.pageX - el.offsetLeft;
              var disy = e.pageY - el.offsetTop;
              document.onmousemove = function (e) {
                  el.style.left = e.pageX - disx + 'px';
                  el.style.top = e.pageY - disy + 'px';
              }
              document.onmouseup = function () {
                  document.onmousemove = document.onmouseup = null;
              }
          }
      },
      // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
      updated: function (el) { }
  })
  export default drag;
  

• 在 main.js 中引入该指令：

  import './utils/drag'
  

• 在需要实现拖拽的元素中，加入指令：v-drag