在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;

一個可以拖拽的彈窗功能就製作完成了！