首先我们看一下效果
动画1
首先,我们要被div包裹的el-button,为什么要加这个div呢,因为我们用到了html的
@dragstart="dragstart($event)" @dragend="dragend($event)" 这两个事件,而这两个事件写在el-button组件中是无法识别的,而 draggable="true" 这是html的一个属性为trun时可拖拽但无法移动,为了计算拖拽位置要给父元素加一个ref="back_box"下面我们看看如何实现拖拽后移动元素
<div ref="back_box">
<div @dragstart="dragstart($event)" @dragend="dragend($event)" class="p" draggable="true" :style="`left:${elLeft}px;top:${elTop}px`">
<el-button type=" primary" style="left: 95%;font-size: 40px;position:absolute" icon="el-icon-edit-outline" circle @click="goto()"></el-button>
</div>
</div>
在date中我们定义几个计算位置的字段
export default {
data(){
return{
initWidth: 0, // 父元素的宽-自适应值
initHeight: 0, // 父元素的高-自适应值
startclientX: 0, // 元素拖拽前距离浏览器的X轴位置
startclientY: 0, //元素拖拽前距离浏览器的Y轴位置
elLeft: 1150, // 元素的左偏移量(也是按钮未拖拽之前的位置)
elTop: 50, // 元素的上偏移量(也是按钮未拖拽之前的位置)
}
},}
下面是上面提到两种事件的js代码,页面初始化拿到按钮的起始位置,拖拽时会触发另外两个事件
mounted() {
// console.log(this.$el);
this.initBodySize();
},
methods:{
// 页面初始化
initBodySize() {
this.initWidth = this.$refs.back_box.clientWidth; // 拿到父元素宽
// this.initHeight = this.initWidth * (1080 / 1920);
this.initHeight = this.initWidth * ((1080 * 0.88) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
},
dragstart(e) {
console.log(e);
this.startclientX = e.clientX; // 记录拖拽元素初始位置
this.startclientY = e.clientY;
},
// 拖拽完成事件
dragend(e) {
console.log(e);
let x = e.clientX - this.startclientX; // 计算偏移量
let y = e.clientY - this.startclientY;
this.elLeft += x; // 实现拖拽元素随偏移量移动
this.elTop += y;
},
}