鼠标方上去随意拖动到其它位置
<template>
<div style="margin: 50px;">
<div class="dade draggable-div" @mousedown="startDrag($event)" @mouseup="stopDrag" @mousemove="drag($event)"
style="width: 200px;height: 200px;border: 1px solid #e7e7e7;cursor: all-scroll;">
</div>
</div>
</template>
<script>
export default {
data() {
return {
isDragging: false,
startX: 0,
startY: 0,
currentX: 0,
currentY: 0
};
},
watch: {
},
//界面没出来前加载
created() {
this.list = menu_tree;
},
mounted() {
},
computed: {
},
methods: {
//鼠标按下
startDrag(event) {
this.isDragging = true;
this.startX = event.clientX;
this.startY = event.clientY;
this.currentX = parseInt(event.target.offsetLeft);
this.currentY = parseInt(event.target.offsetTop);
// event.target.style.cursor = 'grabbing';
document.addEventListener('mousemove', this.drag);
document.addEventListener('mouseup', this.stopDrag);
},
drag(event) {
if (this.isDragging) {
const diffX = event.clientX - this.startX;
const diffY = event.clientY - this.startY;
event.target.style.left = this.currentX + diffX + 'px';
event.target.style.top = this.currentY + diffY + 'px';
}
},
stopDrag() {
this.isDragging = false;
// event.target.style.cursor = 'grab';
document.removeEventListener('mousemove', this.drag);
document.removeEventListener('mouseup', this.stopDrag);
}
}
};
</script>
<style scoped>
.dade{
-webkit-box-shadow: 0 2px 0px 0 rgba(0,0,0,.1);
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.draggable-div {
position: absolute;
}
</style>