```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>鼠标拖动</title>
<style>
.div-window1, .div-window2 {
margin: 0;
padding: 0;
position: absolute;
}
.div-window1 {
top: 200px;
left: 200px;
background-color: gray;
width: 100px;
height: 100px;
}
.div-window1:hover {
background-color: red;
}
.div-window2 {
top: 350px;
left: 350px;
background-color: green;
width: 100px;
height: 100px;
}
.div-window2:hover {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div id="window1" class="div-window1"
v-on:mousedown="onMouseDown('window1', $event)"
v-on:mousemove="onMouseMove($event)"
v-on:mouseout="onMouseOut('window1')"
>
</div>
<div id="window2" class="div-window2"
v-on:mousedown="onMouseDown('window2', $event)"
v-on:mousemove="onMouseMove($event)"
v-on:mouseout="onMouseOut('window2')"
>
</div>
</div>
<script>
window.onload = function () {
var vm = new Vue({
el: '#app',
data: {
isDebug: true, // debug开关, 打开则在Console输出相关日志
choiceDom: null, // 鼠标选中的DOM
mouse: { // 鼠标相关属性
init: { // 鼠标移动前的位置属性, 如果鼠标还未Click过, 则为空
x: null, // 鼠标x轴定位
y: null, // 鼠标y轴定位
}
},
},
methods: {
onMouseOut: function (domID) {
// 鼠标若移动太快, 则会划出DIV, 本方法即对此事件的处理
if (this.choiceDom === null) { // 如果尚未选中DOM
return; // 立即退出方法
}
if (this.choiceDom.id === domID) { // 如果离开的DOM是当前选中的DOM
this.choiceDom = null; // 则将选中的DON置空
}
},
onMouseDown: function (domID, event) { // 当鼠标按下某DOM
this.choiceDom = document.getElementById(domID); // 获取dom object
this.choiceDom.cursor = "move" // 修改鼠标指针样式
this.mouse.init.x = event.clientX; // 获取鼠标X轴定位
this.mouse.init.y = event.clientY; // 获取鼠标Y轴定位
if (this.isDebug) {
console.log(`鼠标已选中[ ${domID} ]`);
console.log(`鼠标初始位置为X:${event.clientX}px, Y:${event.clientY}px`);
}
},
onMouseUp: function () { // 鼠标左键弹起处理
this.choiceDom = null; // 置空选中元素
console.log(`鼠标已被放开`);
},
onMouseMove: function (event) {
if (this.choiceDom === null) { // 如果没有选中的元素
return; // 立即结束
}
let domLeft = this.choiceDom.offsetLeft + event.clientX - this.mouse.init.x;
// 当前DIV的X轴位置 + 当前鼠标x轴位置 - 鼠标移动前的位置,
// 后两者减法计算即为计算鼠标X轴偏移量
let domTop = this.choiceDom.offsetTop + event.clientY - this.mouse.init.y;
// 当前DIV的Y轴位置 + 当前鼠标y轴位置 - 鼠标移动前的位置,
// 后两者减法计算即为计算鼠标Y轴偏移量
this.mouse.init.x = event.clientX // 更新鼠标X轴位置
this.mouse.init.y = event.clientY // 更新鼠标Y轴位置
this.choiceDom.style.left = `${domLeft}px`; // DIV Y轴位置赋值, 即Y轴移动
this.choiceDom.style.top = `${domTop}px`; // DIV X轴位置赋值, 即X轴移动
}
},
mounted: function () {
window.onmouseup = this.onMouseUp; // 设置监听全窗口鼠标弹起事件
}
})
}
</script>
</body>
</html>
```
