vue实现图片的拖动
背景：
使用VUE做前端开发，目前需要实现这样的功能：
1.页面上有许多图片（设备图片），通过拖动图片的位置，
然后获取图片新的位置信息，并写入数据库。下次加载的时候会显示新的位置。
2.从右边文字设备列表拖拉文字到显示区，进行设备的添加，并获取位置信息
问题：请求相关例子或参考资料，谢谢！
利用按钮和弹框来实现移动图片和获取图片位置信息，用的是elementUI组件。
参考代码：
<template>
<div>
<el-button type="primary" @click="planSetModal = true">添加位置</el-button>
<el-dialog :fullscreen="true" el-dialog title="添加位置" :visible.sync="planSetModal">
<div class="position_set_content">
<div class="position_set_left">
<div @mousedown="handleMoveIcon">
<img src="@/assets/location.png" alt=""/>
<div class="position_set_tips">
<div><b> 坐标：</b>({{positionX - 200}}, {{positionY }})</div>
<div><b>提示：</b>按住并拖起定位图标，移至正确的地方后，单击放下，点击确定按钮即可</div>
</div>
</div>
</div>
<div class="position_set_right">
<img src="@/assets/1F.png" alt=""/>
</div>
</div>
<div slot="title">
<el-button type="primary" @click="submitPosition">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default{
data(){
return{
planSetModal: false,
positionX:0,
positionY:0,
form:{}
}
},
methods:{
handleMoveIcon(e){
let odiv = e.target; //获取目标元素
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//绑定元素位置到positionX和positionY上面
this.positionX = left;
this.positionY = top;
//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
submitPosition(){//确定
// 位置是图标相对于图片中的位置，图片右侧有200px余白，减去就是在图中的相对X坐标
this.form.locationX = this.positionX - 200
this.form.locationY = this.positionY
this.planSetModal = false
},
},
}
</script>
<style scoped lang="scss">
.position_set_content{
position: relative;
display: flex;
.position_set_left{
position: relative;
width: 200px;
img{
position: absolute;
top: 0;
left: 0;
height: 40px;
cursor: pointer;
}
.position_set_tips{
margin-top: 50px;
div:nth-child(2){
margin-top: 10px;
font-size: 14px;
color: rgb(48, 116, 241);
}
}
}
.position_set_right{
width: 1500px;
img{
width: 100%;
}
}
}
</style>
这个应该可以帮上你
最好用的 6 款 Vue 拖拽组件库推荐 - 卡拉云_蒋川_卡拉云的博客-CSDN博客_vue 拖动组件
你的第一个需求文章里面提及的这个插件就能很好的支持
A Vue dnd plugin - Awe-dnd
vue - 实现图片拖拽效果_紫菀檀ss的博客-CSDN博客_vue实现图片拖动
1.安装依赖包npm install awe-dnd --save2.main.js文件（全局）引入// 拖拽import VueDND from 'awe-dnd';Vue.use(VueDND);3.在使用图片拖拽的页面对应的循环的标签加上以下代码： v-dragging="{ item: item, list: masterImgList, group: 'index' }...
https://blog.csdn.net/LiaoFengJi/article/details/97934600?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166735596616782412528084%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166735596616782412528084&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduend~default-2-97934600-null-null.nonecase&utm_term=vue%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E7%9A%84%E6%8B%96%E5%8A%A8&spm=1018.2226.3001.4450
基于vue实现图片拖拽功能_柯基小肥臀的博客-CSDN博客_vue图片拖拽
主要涉及到的元素知识，示意图：js代码部分：directives: { drag: { // 指令的定义 bind: function(el) { // 获取当前元素 let oDiv = el; oDiv.onmousedown = (e) => { // 算出鼠标相对元素的位置 let disX = e.clientX - oDiv.offsetLeft; .
https://blog.csdn.net/qq_51009027/article/details/121215527?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E7%9A%84%E6%8B%96%E5%8A%A8&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-2-121215527.nonecase&spm=1018.2226.3001.4450
好像都用这个组件，vuedraggable ，看着不用怎么折腾
是物联网的那种应用？设备定位的那种？可能需要自己改造哦，很少有现成直接能用的。