npm i -s vue-drag-resize
<template> <div> <div class="father"> <VueDragResize v-for="item in imglist" :key="item.id" :w="150" :h="100" :x="item.xind" :y="item.yind" :parent-limitation="true" :is-resizable="false" > <img :src="item.img" alt="" style="width: 150px;height: 100px;"> <p class="cons" style="position: absolute; top:30%;left: 35%;color: white;">{{ item.con }}</p> <span style="position: absolute; top:2%;left: 85%;color: white;" @click="delclick">X</span> </VueDragResize> <!-- <VueDragResize :w="150" :h="100" :x="200" :y="100" :parent-limitation="true" @clicked="act(1)" @activated="onActivated"> <img src="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" alt="" style="width: 150px;height: 100px;"> </VueDragResize> --> </div> </div> </template> <script> import VueDragResize from 'vue-drag-resize' export default { name: 'Drag-d2', data() { return { 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"}, ] } }, components: { VueDragResize }, methods: { } } </script> <style scoped> .father { height: 60vh; width: 70vw; border: 1px solid red; position: relative; margin: 0 auto; } .drag { border: 2px solid red; } </style>