目錄
- 進入正題
- 準備實驗環境
- 元素的位置和移動
- 定義三組坐標
- 注冊 mousedown 事件
- 實現拖拽的核心
- 補充其它部分代碼和演示
- 總結
進入正題
元素拖拽是一個比較典型的前端學習案例，需要對 JavaScript 的事件有一定的了解，我也是在最近的工作中才重新拾起了這塊內容，通過在 Vue3 這種聲明式編程風格的框架中把元素拖拽一次講清楚。
準備實驗環境
依舊推薦你來1024Code Fork 我的《【項目模板】Vue3+Vite3+Ts4》 開始這次學習。
PS：Vue3 模板全局樣式中的居中屬性可能會造成實驗干擾，請注意?。?！
元素的位置和移動
在實現元素拖拽我們使用 mouse 事件，在 mouse 事件的回調函數中可以得到當前事件發生時元素的位置，對應的屬性是 MouseEvent 中的 clientX 和 clientY，我們后續將通過讀取這兩個屬性來實時更新元素的位置。
元素的移動推薦優先使用 transform 中的 translate 實現，相比于修改元素的 top、left 屬性來說不會造成元素布局的改變，避免了回流和重繪造成的性能影響。
PS：在 MDN 有一份關于translate的使用和體驗，可以感受一下。
定義三組坐標
分別定義用來記錄元素初始位置的一組坐標（originalPosition）、元素被按下時指針在元素上的坐標（mousedownOffset）和元素在移動時實時更新的一組坐標（elementPosition）。
記錄元素初始位置的坐標，原點位于頁面左上角，用來在初始化和被拖拽結束后還原被拖拽元素的位置，固定值不發生變化：
const originalPosition = reactive({
x: 10,
y: 10,
})
元素被按下時指針在元素上的坐標，原點位于被拖拽元素的左上角，通過按下時指針的坐標 - 元素初始的偏移位置得到：
const mousedownOffset = reactive({
x: 0,
y: 0,
})
元素在移動時實時更新的坐標，原點位于頁面左上角，初始值應該同 originalPosition ，在 mousemove 事件發生時，通過指針的實時坐標 - mousedownOffset 得到：
const elementPosition = reactive({
x: 0,
y: 0,
})
PS：當原點是頁面左上角時在圖中的1號點表示 originalPosition 或 elementPosition，2號點表示指針按下時的坐標，當原點是1號點時在圖中的2號點表示 mousedownOffset；
注冊 mousedown 事件
在實現元素拖拽時，僅需要給被拖拽的元素添加 mousedown 事件即可，監聽事件使用完后記得要清楚掉，成對出現的習慣一定要養成。
如果你把 mousemove 和 mouseup 都添加到被拖拽的元素上，你會發現有脫離控制的現象發生。
在頁面加載完成后首先要重置一下被拖拽元素的默認位置，并增加 mousedown 事件，在組件卸載后刪除 mousedown 事件：
const restore = () => {
elementPosition.x = originalPosition.x;
elementPosition.y = originalPosition.y;
}
onMounted(() => {
restore();
floatButton.value.addEventListener('mousedown', onMousedown, true);
})
onUnmounted(() => {
floatButton.value.removeEventListener('mousedown', onMousedown, true);
})
實現拖拽的核心
選擇 Vuejs 的原因就是因為其是 MVVM 型框架，我們關注點在聲明上，內部的運轉機制有框架負責，所以在下面的事件處理上就只需要在對應的事件中去更新一開始聲明的三組坐標就可以了。
在 onMousedown 時，通過指針所在的坐標 - 被拖拽元素初始位置的坐標得到指針此時在被拖拽元素上的坐標，onMousedown 時要為 document 添加 mousemove 和 mouseup 事件：
const onMousedown = (event: MouseEvent) => {
event.stopPropagation();
mousedownOffset.x = event.clientX - originalPosition.x;
mousedownOffset.y = event.clientY - originalPosition.y;
document.addEventListener('mousemove', onMousemove, true);
document.addEventListener('mouseup', onMouseup, true);
}
在 onMousemove時，通過指針所在的坐標 - 指針在被拖拽元素上的位置得到被拖拽元素左上角距離頁面左上角的距離，并更新到 elementPosition：
const onMousemove = (event: MouseEvent) => {
event.stopPropagation();
elementPosition.x = event.clientX - mousedownOffset.x;
elementPosition.y = event.clientY - mousedownOffset.y;
}
在 onMouseup時，主要做的就是為 document 移除在 onMousemove 時注冊的兩個事件，要注意的是移除的事件要是同一個事件，也就是引用一致的事件，推薦將對應的處理事件賦值給一個變量使用，最后可以在拖拽結束后還原被拖拽元素的位置：
const onMouseup = (event: MouseEvent) => {
event.stopPropagation();
document.removeEventListener('mousemove', onMousemove, true);
document.removeEventListener('mouseup', onMouseup, true);
restore();
}
補充其它部分代碼和演示
<div
ref="floatButton"
class="float-button"
:style="{
'transition-duration': '0.1s',
transform: `translate(${elementPosition.x}px, ${elementPosition.y}px)`
}">
</div>
.float-button {
position: absolute;
width: 42px;
height: 42px;
background: red;
border-radius: 5px;
user-select: none;
background-image: url(../assets/taobao.svg);
background-size: cover;
}
總結
使用 mousemove、translate 在 Vue3 中實現可以隨意拖拽的 Icon 的案例就完成了，在本次案例中需要認真思考對應的幾個坐標和移動時坐標如何更新，事件的使用要成對出現，如何在這個拖拽的 Icon 上增加點擊事件時還需要多做一些處理，有答案的朋友可以留下你的想法~
到此這篇關于在 Vue3 中實現飄逸的元素拖拽的文章就介紹到這了,更多相關Vue3元素拖拽內容請搜索技圈網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持技圈網！