```
<!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;??//?立即結(jié)束
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? 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;??//?設置監(jiān)聽全窗口鼠標彈起事件
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? }
? ? </script>
</body>
</html>
```
