busroute/src/components/Drag.vue

<template>
  <div
    class="drag-container "
    :class="className"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import {
  nextTick,
  ref
} from 'vue'

const props = withDefaults(defineProps<{
    domClassName: string,
}>(), {
  domClassName: ''
})
const className = ref(`drag-${Math.random() * 10000}`)
nextTick(() => {
  const dragDom = document.getElementsByClassName(className.value)[0] as HTMLElement
  if (!dragDom) return
  const targetDom = dragDom.getElementsByClassName(props.domClassName)[0] as HTMLElement
  let isDrag = false
  const mouseDown = (e: any) => {
    if (!targetDom.contains(e.target)) return

    isDrag = true
    const X = e.clientX - dragDom.offsetLeft
    const Y = e.clientY - dragDom.offsetTop
    const move = (event: MouseEvent) => {
      event.preventDefault()
      if (isDrag) {
        dragDom.style.left = `${event.clientX - X}px`
        dragDom.style.top = `${event.clientY - Y}px`
        dragDom.style.right = 'auto'
      }
    }
    document.addEventListener('mousemove', move, false)
    document.addEventListener('mouseup', () => {
      isDrag = false
      document.removeEventListener('mousemove', move)
    })
  }
  dragDom.addEventListener('mousedown', mouseDown)
})
</script>
<style scoped>
.drag-container {
  position: absolute !important;
  z-index: 100;
}
</style>