draggable-on-mobile

<template>
  <el-button type="primary" @click="reset">还原位置</el-button>
  <div class="area" ref="areaDom">
    <div ref="draggable" class="move"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { draggableDom } from 'draggable-on-mobile'
const areaDom = ref(null)
const draggable = ref(null)
const getMove = () => {
  draggableDom().moveDom(draggable.value, areaDom.value)
}
let initX = 0
let initY = 0
const reset = () => {
  draggableDom().resetPosition(draggable.value, initX, initY)
}
onMounted(() => {
  initX = draggable.value.offsetLeft
  initY = draggable.value.offsetTop
  getMove()
})
</script>

<style lang="scss" scoped>

.area {
  width: 300px;
  height: 200px;
  background-color: green;
  position: relative;
}
.move {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  touch-action: none;
}
</style>