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

此效果通过 vue 指令方式实现模态框可拖拽移动。

参考官网指令介绍：
vue2 自定义指定
vue3 自定义指定

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

  /************* vue2 *************/
  import Vue from 'vue';
  // 1.参数一：指令的名称，定义时指令前面不需要写v-
  // 2.参数二：是一个对象，该对象中有相关的操作函数
  // 3.在调用的时候必须加v-
  const drag = Vue.directive('drag', {
    inserted(el) {
      el.addEventListener('mousedown', e => {
        el.style.cursor = 'pointer'
  
        let x = e.pageX - el.offsetLeft
        let y = e.pageY - el.offsetTop
  
        const move = (e) => {
          el.style.left = e.pageX - x + 'px'
          el.style.top = e.pageY - y + 'px'
        }
  
        document.addEventListener('mousemove', move)
  
        window.addEventListener('mouseup', () => {
          el.style.cursor = ''
          document.removeEventListener('mousemove', move)
        })
      })
    }
  })
  
  export default drag;
  

  /************* vue3 *************/
  const drag = (app: any) => app.directive('drag', {
    mounted(el: HTMLElement) {
      el.addEventListener('mousedown', (e: MouseEvent) => {
        el.style.cursor = 'pointer'
  
        let x = e.pageX - el.offsetLeft
        let y = e.pageY - el.offsetTop
  
        const move = (e: MouseEvent) => {
          el.style.left = e.pageX - x + 'px'
          el.style.top = e.pageY - y + 'px'
        }
  
        window.addEventListener('mousemove', move)
  
        window.addEventListener('mouseup', () => {
          el.style.cursor = ''
          window.removeEventListener('mousemove', move)
        })
      })
    }
  })
  
  export default drag;
  

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

  /************* vue2 *************/
  import './utils/drag'
  

  /************* vue3 *************/
  import './utils/drag'
  
  const app = createApp(App)
  drag(app)
  

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

注意：
给需要拖拽的元素加上绝对定位，图像、链接需要设置 draggable 为 false。
本文中的拖拽是指模态框等自定义弹框的拖动效果，并非元素属性 draggable 的拖拽效果，有兴趣的小伙伴可以自行研究 draggable文档