【Vue】Vue 拖拽指令 禁选文字 解决子元素 input 不能输入 、拖动粘连鼠标

directives: {

    drag(el) {

      // 解决拖动会选中文字的问题

      document.onselectstart = () => {

        return false

      }

      el.onmousedown = function (event) {

       // 解决子元素 input 框无法输入等情况

        if(event.target?.nodeName == 'INPUT' || event.target?.nodeName == 'IMG') {

          return

        }

        const startX = event.clientX

        const startY = event.clientY

        const left = el.offsetLeft

        const top = el.offsetTop

        const elWidth = el.clientWidth

        const elHeight = el.clientHeight

        const documentWidth = document.documentElement.clientWidth

        const documentHeight = document.documentElement.clientHeight

        document.onmousemove = function (event) {

          const X = event.clientX - startX

          const Y = event.clientY - startY

          // 限制拖拽不允许超出可视区

          if (X + left < 0) {

            el.style.left = '0px'

          } else if (X + left > documentWidth - elWidth - 5) {

            el.style.left = `${documentWidth - elWidth - 5}px`

          } else {

            el.style.left = `${X + left}px`

          }

          if (Y + top < 0) {

            el.style.top = '0px'

          } else if (Y + top > documentHeight - elHeight - 5) {

            el.style.top = `${documentHeight - elHeight - 5}px`

          } else {

            el.style.top = `${Y + top}px`

          }

        }

        document.onmouseup = function () {

          document.onmousemove = document.onmouseup = null

        }

        return false

      }      

    }

  },