<template>
<div id="Drag" @mousedown="mousedown($event)" class="drag"></div>
</template>
<script>
export default {
name: "Drag",
data() {
return {
DragEl: null,
totalHeight: null,
totalWidth: null,
disX: 0,
disY: 0,
};
},
mounted() {
this.DragEl = document.getElementById("Drag");
this.totalHeight = window.innerHeight;
this.totalWidth = window.innerWidth;
console.log(this.totalHeight, this.totalWidth)
},
methods: {
mousedown(event) {
this.disX = event.clientX - this.DragEl.offsetLeft;
this.disY = event.clientY - this.DragEl.offsetTop;
let dragHeight = this.DragEl.offsetHeight;
let dragWidth = this.DragEl.offsetWidth;
document.onmousemove = (el) => {
let moveX = el.clientX - this.disX;
let moveY = el.clientY - this.disY;
console.log(moveX, moveY)
if (moveX <= 210) {
moveX = 210;
}
if (moveX >= this.totalWidth-50 ) {
moveX = this.totalWidth-50 ;
}
if (moveY <= 50) {
moveY = 50;
}
if (moveY >= this.totalHeight-50) {
moveY = this.totalHeight-50;
}
this.DragEl.style.left = moveX + "px";
this.DragEl.style.top = moveY + "px";
};
document.onmouseup = () => {
document.onmousemove = null;
};
}
}
};
</script>
<style scoped lang="scss">
.drag {
position: fixed;
width: 50px;
height: 50px;
border: 5px solid yellowgreen;
background-color: red;
text-align: center;
left: 50%;
top: 50%;
}
</style>