<template>
  <div class="drag">
    <img draggable="true"
         @click="open"
         class="drag-box"
         src="https://img2.baidu.com/it/u=567357414,4240886412&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1685466000&t=8f77d03e5be750f97c2c3aa6c266a01a"
         alt="">
  </div>
</template>

<script setup>
import {ref, nextTick} from "vue"

nextTick(() => {
  if(isWebPlatform()) initDrag()
  else initDrag1()
})
/*
注意事项：
1. 父元素的宽高、元素在其内内移动。
2. 拖拽和点击事件的冲突解决、使用时间戳
3. 图片拖拽时候不可拖拽、阻止默认事件
* */

//pc端
let time = 0
const initDrag = () => {
  const dragBox = document.getElementsByClassName('drag-box')[0]
  const dragParent = dragBox.offsetParent

  let maxX = dragParent.offsetWidth - dragBox.offsetWidth
  let maxY = dragParent.offsetHeight - dragBox.offsetHeight

  dragBox.onmousedown = (e) => {
    let x = ''
    let y = ''
    e.preventDefault() //阻止默认事件、如图片的禁止拖拽
    let disx = e.pageX - dragBox.offsetLeft
    let disy = e.pageY - dragBox.offsetTop
    dragBox.onmousemove = (e) => {
      x = e.pageX - disx
      y = e.pageY - disy
      time = new Date() //开始移动的时间
      if (x < 0) {
        x = 0
      } else if (x >= maxX) {
        x = maxX
      }
      if (y < 0) {
        y = 0
      } else if (y >= maxY) {
        y = maxY
      }
      dragBox.style.left = x + 'px'
      dragBox.style.top = y + 'px'
    }
  }
  //清除
  dragBox.onmouseleave = () => {
    dragBox.onmousemove = null
  }
  dragBox.onmouseup = () => {
    dragBox.onmousemove = null
  }
}

//移动端
const initDrag1 = () => {
  const dragBox = document.getElementsByClassName('drag-box')[0]
  const dragParent = dragBox.offsetParent //父元素

  let maxX = dragParent.offsetWidth - dragBox.offsetWidth
  let maxY = dragParent.offsetHeight - dragBox.offsetHeight

  dragBox.ontouchstart = (e)=> {
    let x = ''
    let y = ''
    let disx = e.touches[0].pageX - dragBox.offsetLeft
    let disy = e.touches[0].pageY - dragBox.offsetTop
    dragBox.ontouchmove = (e)=> {
      x = e.touches[0].pageX - disx
      y = e.touches[0].pageY - disy
      if (x < 0) {
        x = 0
      } else if (x >= maxX) {
        x = maxX
      }
      if (y < 0) {
        y = 0
      } else if (y >= maxY) {
        y = maxY
      }
      dragBox.style.left = x + 'px'
      dragBox.style.top = y + 'px'
    }
    dragBox.ontouchend = (e)=> {
      dragBox.ontouchmove = null
    }
  }
}
const open = () => {
  /*
  * 解决pc端拖拽和点击事件的冲突
  * */
  let curr = 0
  if (time) {
    let now = new Date().getTime()
    let dragTime = (new Date(time)).getTime()
    curr = now - dragTime
  }
  time = 0
  if (curr <= 0) alert('web端点击')
  console.log(curr,'curr是')
}
const isWebPlatform = ()=> {
  let userAgentInfo = navigator.userAgent
  let Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]
  let flag = true;
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

</script>

<style scoped>
.drag {
  width: 50%;
  height: 50vh;
  border: solid 1px pink;
  margin: 0 auto;
  position: relative;
}

.drag-box {
  width: 50px;
  height: 50px;
  border: solid 1px #2c3e50;
  border-radius: 20px;
  cursor: move;
  position: absolute;
}

</style>