<template>
<div class="home">
<div class="kuang">
<img alt="Vue logo" src="../assets/logo.png" @dragstart="ondragstart" @dragend="ondragend" :style="positionYX">
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data(){
return{
xStart:0,
yStart:0,
xEnd:0,
yEnd:0,
positionYX:{
position:'relative',
left:0,
top:0
},
// 移动位置
moveLeft:0,
moveTop:0,
// 当前位置
currentLeft:0,
currentTop:0,
}
},
methods:{
// 用户开始拖动元素时触发
ondragstart(e){
this.xStart = e.clientX;
this.yStart = e.clientY;
},
// - 元素正在拖动时触发
ondrag(){
},
// - 用户完成元素拖动后触发
ondragend(e){
this.xEnd = e.clientX;
this.yEnd = e.clientY;
// 移动位置
let leftx = -(this.xStart - this.xEnd);
let topy = -(this.yStart - this.yEnd);
// 移动位置
this.moveLeft = leftx;
this.moveTop = topy;
// 目标位置
let objectiveLeft = leftx + this.currentLeft;
let objectiveTop = topy + this.currentTop;
// 当前位置
this.currentLeft = objectiveLeft;
this.currentTop = objectiveTop;
this.positionYX.left = this.currentLeft + 'px';
this.positionYX.top = this.currentTop + 'px';
}
}
}
</script>
<style>
*{margin: 0;padding: 0;}
.kuang{width: 600px;height: 600px;border: 1px solid red;position: relative;left: 300px;top: 100px;}
</style>
