【无标题】亲测有效，拖拽js，完美拖拽，无bug，vuetify中拖拽dialog

亲测有效，拖拽js，完美拖拽，无bug，vuetify中拖拽dialog

有一个弹框拖拽需求，用的ui库是vuetify，但是ui库本身是不支持拖拽的，此时又需要支持拖拽，以下代码就派上用场了

首先，建一个draggable.js文件

// draggable.js
// 拖拽
function draggable() {
  const d = {}
  document.addEventListener('mousedown', (e) => {
    const closestDialog = e.target.closest('.v-dialog.v-dialog--active')
    if (e.button === 0 && closestDialog != null && e.target.classList.contains('v-card__title')) {
      // element which can be used to move element
      d.el = closestDialog // element which should be moved
      d.mouseStartX = e.clientX
      d.mouseStartY = e.clientY
      d.elStartX = d.el.getBoundingClientRect().left
      d.elStartY = d.el.getBoundingClientRect().top
      d.el.style.position = 'fixed'
      d.el.style.margin = 0
      d.oldTransition = d.el.style.transition
      d.el.style.transition = 'none'
    }
  })
  document.addEventListener('mousemove', (e) => {
    if (d.el === undefined) return
    d.el.style.left =
      Math.min(
        Math.max(d.elStartX + e.clientX - d.mouseStartX, 0),
        window.innerWidth - d.el.getBoundingClientRect().width,
      ) + 'px'
    d.el.style.top =
      Math.min(
        Math.max(d.elStartY + e.clientY - d.mouseStartY, 0),
        window.innerHeight - d.el.getBoundingClientRect().height,
      ) + 'px'
  })
  document.addEventListener('mouseup', () => {
    if (d.el === undefined) return
    d.el.style.transition = d.oldTransition
    d.el = undefined
  })
}

// 防止越界
function preventBounds() {
  timer = setInterval(() => {
    // prevent out of bounds
    const dialog = document.querySelector('.v-dialog.v-dialog--active')
    if (dialog === null) return
    dialog.style.left =
      Math.min(
        parseInt(dialog.style.left),
        window.innerWidth - dialog.getBoundingClientRect().width,
      ) + 'px'
    dialog.style.top =
      Math.min(
        parseInt(dialog.style.top),
        window.innerHeight - dialog.getBoundingClientRect().height,
      ) + 'px'
  }, 100)
}

export { draggable, preventBounds }

再在需要用到的页面中引入

import { draggable } from '@/utils/draggable.js'
mounted() {
   // 使弹框可以拖拽
   draggable()
},

弹框就可以拖拽啦，preventBounds函数暂时没有用到，可以自行看情况调用

如果页面上有很多弹框，但是只想其中一个可以拖拽，怎么办呢

<v-dialog content-class="move-dialog">

给dialiog设置一个单独的类名，并修改draggable.js文件

const closestDialog = e.target.closest('.v-dialog.v-dialog--active.move-dialog')

只修改这一行就可以，把单独的类名加进去，现在就可以单独拖拽某一个弹框了。