Auto Commit

src/App.vue

+<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 HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
+import {ref, nextTick} from "vue"
 
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+nextTick(() => {
+  if(isWebPlatform()) initDrag()
+  else initDrag1()
+})
+/*
+注意事项：
+1. 父元素的宽高、元素在其内内移动。
+2. 拖拽和点击事件的冲突解决、使用时间戳
+3. 图片拖拽时候不可拖拽、阻止默认事件
+* */
 
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
+//pc端
+let time = 0
+const initDrag = () => {
+  const dragBox = document.getElementsByClassName('drag-box')[0]
+  const dragParent = dragBox.offsetParent
 
-  <main>
-    <TheWelcome />
-  </main>
-</template>
+  let maxX = dragParent.offsetWidth - dragBox.offsetWidth
+  let maxY = dragParent.offsetHeight - dragBox.offsetHeight
 
-<style scoped>
-header {
-  line-height: 1.5;
+  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
+  }
 }
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
+//移动端
+const initDrag1 = () => {
+  const dragBox = document.getElementsByClassName('drag-box')[0]
+  const dragParent = dragBox.offsetParent //父元素
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+  let maxX = dragParent.offsetWidth - dragBox.offsetWidth
+  let maxY = dragParent.offsetHeight - dragBox.offsetHeight
 
-  .logo {
-    margin: 0 2rem 0 0;
+  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
+    }
   }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+}
+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;
 }
-</style>
+
+.drag-box {
+  width: 50px;
+  height: 50px;
+  border: solid 1px #2c3e50;
+  border-radius: 20px;
+  cursor: move;
+  position: absolute;
+}
+
+</style>
\ No newline at end of file