vue实现图片的拖动

Question

背景：
使用VUE做前端开发，目前需要实现这样的功能：
1.页面上有许多图片（设备图片），通过拖动图片的位置，
然后获取图片新的位置信息，并写入数据库。下次加载的时候会显示新的位置。
2.从右边文字设备列表拖拉文字到显示区，进行设备的添加，并获取位置信息
问题：请求相关例子或参考资料，谢谢！

Answer 1

利用按钮和弹框来实现移动图片和获取图片位置信息，用的是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>