VUE模块拖拽和保存位置代码实现

humors221

已于 2024-08-10 16:02:19 修改

阅读量166

点赞数 3

文章标签：前端 vue 拖动拖拽网页

于 2024-08-10 16:00:51 首次发布

本文链接：https://blog.csdn.net/humors221/article/details/141091579

版权

测试环境:js+vue+java+mybatis+mysql+dbeaver

前端主要代码:

html:

<div id="myid" @mousedown="divDown($evt,'myid')" style="width:800px;height:600px"></div>

vue 变量:

divX:0,
divY:0,
divObj:null,
divObjId:'',
myid:{
x:0,
y:0
}

vue方法:

divDown(evt,did){

        this.divObj = document.getElementById(did)

        this.divObjId = did

        var obj = evt||event;

        this.divX = obj.clientX - this.divObj.offsetLeft;

        this.divY = obj.clientY - this.divObj.offsetTop;

        document.onmousemove = this.divMove;
        document.onmouseup = this.divUp;
    },
    divMove(evt){

        var obj1=evt||event;

        this.divObj.style.left = obj1.clientX - this.divX + 'px';

        this.divObj.style.top = obj1.clientY - this.divY + 'px';

        return false
    },
    divUp(){

        document.onmousemove = null;
        document.onmouseup = null;

        let left = this.divObj.style.left.replace('px','')

        let top = this.divObj.style.top.replace('px','')

        if(this.divObjId=='myid'){
            this.myid.x = left
            this.myid.y = top
        }

        this.saveDivPosition()
    }

java代码:


public class ModuleConfig{
private Long id;
private String level1;
private String level2;
//直接保存模块的JSON字符串
private String configs;
//省略setter/getter
...
}

mysql代码:

dbeaver