Vue3 + Js 指定位置进行拖动

//main.js
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import VueDragResizeRotate from "@gausszhou/vue3-drag-resize-rotate";
import "@gausszhou/vue3-drag-resize-rotate/lib/bundle.esm.css";
createApp(App).use(VueDragResizeRotate).mount('#app')

<template>
  <div class="view-box">
    <div id="toolbar">父级容器基本案例</div>
    <div class="container">
      <!-- <div v-for="item in imglist"> -->
        <VueDragResizeRotate v-for="item in imglist" :parent="true">
          <div class="sdiv" >
            <img :src="item.img" alt="" style="width:100%;height: 100%;">
            <p style="position: absolute;top:32%;left: 42%;color: white;">{{ item.con }}</p>
          </div>
        </VueDragResizeRotate>
      <!-- </div> -->
    </div>
  </div>
</template>
<script setup>
const imglist = [
  { id: '01', con: '图一', xind: 10, yind: 20, img: 'https://ts1.cn.mm.bing.net/th/id/R-C.5a49085e4afe4261c8994e7b2ad91842?rik=VxQQBSuFk%2f%2ftaA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fbbs4%2f200810%2f17%2f1224206085128.jpg&ehk=QaHcMJfNlSmAGrzRh6DkCiRkBlEs9J5Tw95WfADpO9E%3d&risl=&pid=ImgRaw&r=0' },
  { id: '02', con: '图二', xind: 200, yind: 100, img: 'https://ts1.cn.mm.bing.net/th/id/R-C.4909aa42dd7c594716632b97f1f18618?rik=HMYl7AI4kVNajg&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f200912%2f20091223150532446.jpg&ehk=FScUCbGto5iQGiYuMmbcfs3IQo4mwvkcqSDs%2bJrXAnU%3d&risl=&pid=ImgRaw&r=0' },
];
</script>
<style scoped>
.container {
  width: 600px;
  height: 400px;
  border: 1px solid;
}
.sdiv{
  width: 100%;
  height: 100%;
}
</style>