vue3标签拖拽=vue2类似

vue3标签拖拽

 <div
        class="wen draggable"
        id="wen"
        v-if="dragShow == true"
        :style="{
          top: elementTop + 'px',
          left: elementLeft + 'px',
        }"
        @mousedown="startDrag"
        @touchstart="startDrag"
        @mouseup="endDrag"
        @touchend="endDrag"
        @click="btnShowImg()"
      >
       
      </div>
      let list = reactive({
      windCLient: null,
      dragging: false,
      dragShow: true,
      dragShowL: true,
      elementTop: 140,
      elementLeft: 0,
      elementRight: 0,
      initialX: 0,
      initialY: 0,
      offsetX: 0,
      offsetY: 0,
      tshowImg: false,
    })
    onMounted(()=>{
       list.windCLient = document.body.clientWidth - 64
       })

   function startDrag(event) {
      // event.preventDefault()
      document.body.style.overflow = 'hidden' // 禁用滚动
      list.dragging = true
      list.initialX = event.touches ? event.touches[0].clientX : event.clientX
      list.initialY = event.touches ? event.touches[0].clientY : event.clientY
      list.offsetX = list.elementLeft
      list.offsetY = list.elementTop
      document.addEventListener('mousemove', move)
      document.addEventListener('touchmove', move)
      document.addEventListener('mouseup', stopDrag)
      document.addEventListener('touchend', stopDrag)
    }
    function endDrag(event) {
      document.body.style.overflow = '' // 禁用滚动
      // let draggable = document.getElementsByClassName('draggable')[0]
      // if (list.dragging) {
      //   const x = event.touches ? event.touches[0].clientX : event.clientX
      //   const y = event.touches ? event.touches[0].clientY : event.clientY
      //   list.elementLeft = Number(list.offsetX) + (x - list.initialX)
      //   if (list.elementLeft < list.windCLient && list.elementLeft > 0) {
      //     list.elementLeft = 0
      //     draggable.style.left = list.elementLeft + 'px'
      //   }
      let draggable = document.getElementsByClassName('draggable')[0]
      if (list.dragShowL == false) {
        list.dragShow = false
      }
      if (list.elementLeft < 0 && list.elementLeft > -40) {
        list.elementLeft = 0
        draggable.style.left = 0 + 'px'
      }
      // }
    }
    function move(event) {
      let draggable = document.getElementsByClassName('draggable')[0]
      if (list.dragging) {
        const x = event.touches ? event.touches[0].clientX : event.clientX
        const y = event.touches ? event.touches[0].clientY : event.clientY
        list.elementLeft = Number(list.offsetX) + (x - list.initialX)
        if (list.elementLeft > 0) {
          list.elementLeft = 0
          draggable.style.left = 0 + 'px'
        }

        if (list.elementLeft < -40) {
          list.dragShowL = false
        }

        // if (
        //   list.elementLeft > list.windCLient / 2 &&
        //   list.elementLeft < list.windCLient
        // ) {
        //   list.elementLeft = list.windCLient
        //   list.elementRight = 0
        //   draggable.style.right = list.elementRight + 'px'
        // }
        // if (list.elementLeft > list.windCLient) {
        //   list.elementRight = list.offsetX + (x - list.initialX)
        //   draggable.style.right = list.elementRight + 'px '
        // }
        list.elementTop = list.offsetY + (y - list.initialY)
        draggable.style.top = list.elementTop + 'px'
      }
    }
    function stopDrag() {
      list.dragging = false
      document.removeEventListener('mousemove', move)
      document.removeEventListener('touchmove', move)
      document.removeEventListener('mouseup', stopDrag)
      document.removeEventListener('touchend', stopDrag)
    }