vue3 可拖拽弹窗

在vue中实现一个可以自由拖拽的弹窗!!

第一步: 新建一个js文件,复制粘贴以下代码.其中move函数为可移动,stopMove函数为不可移动.

export function move (el) {
  el.onmousedown = function (e) {
    document.onselectstart = function () {
      return false
    }
    const disx = e.pageX - el.offsetLeft
    const disy = e.pageY - el.offsetTop
    if (e.preventDefault) {
      e.preventDefault()
    } else {
      e.returnValue = false
    }
    document.onmousemove = function (e) {
      let left = e.clientX - disx
      let top = e.clientY - disy

      if (left <= 0) {
        left = 5 // 设置成5是为了不离边缘太近
      } else if (left > document.documentElement.clientWidth - el.clientWidth) {
        // document.documentElement.clientWidth 屏幕的可视宽度
        left = document.documentElement.clientWidth - el.clientWidth - 5
      }
      if (top <= 0) {
        top = 5
      } else if (top > document.documentElement.clientHeight - el.clientHeight) {
        top = document.documentElement.clientHeight - el.clientHeight - 5
        console.log(document.documentElement.clientHeight, el.clientHeight)
      }
      el.style.left = left + 'px'
      el.style.top = top + 'px'
    }
    document.onmouseup = function () {
      document.onmousemove = document.onmouseup = null
    }
  }
}
export function stopMove (el) {
  el.onmousedown = function (e) {
    e.stopPropagation()
  }
}

第二步: 在vue文件中引入js文件.

import { move, stopMove } from 'xxxx'

第三步: 在代码中给标签定义ID值.

  <section  id='trag'>

  <dv-scroll-board id='stop'/>

第四步: 获取id属性,并使用函数.

  setup () {
    onMounted(() => {
　　　　// 可拖拽
      const trag = document.getElementById('trag')
      move(trag)
　　　　// 不可拖拽
      const stop = document.getElementById('stop')
      stopMove(stop)
    })
    return {
    }
  },

第五步： 添加css 样式，我这里用的是move 样式，如果需要其他样式可自行百度 cursor。

cursor: move;

一个可以拖拽的弹窗功能就制作完成了！