?? ? ?? ?? ??? ?????. ?????? ?? ??? ?? ??(originalPosition), ???? ???? ? ???? ?? ??? ?????. ??? ??? ? ??? ??(mousedownOffset)? ??? ??? ? ????? ?????? ?? ??(elementPosition). ??????? ?? ?? ??? ?????. ??? ???? ?? ??? ????. ??? ? ??? ? ???? ??? ??? ?????? ? ?????. ??

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);
})

????? ??? ???? ?? ?? ????. ? ??? ??? ???? ??? ?? ??? ????, ??? ? ???? ??? ????. - ??? ?? ??? ?? ??: ??

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);
}

????? ??? ? ????? ?????? ??, ??? ???? ?? ??? ????, ???? originalPosition? ???? ???. code>mousemove ???? ???? ???? ??? ?? - mousedownOffset? ?????: ??

const onMousemove = (event: MouseEvent) => {
  event.stopPropagation();
  
  elementPosition.x = event.clientX - mousedownOffset.x;
  elementPosition.y = event.clientY - mousedownOffset.y;
}

??????PS: ??? ???? ?? ??? ? ???? Point 1? ? ?????. OriginalPosition ?? elementPosition, ??? 2? ???? ??? ?? ??? ?????. ??? ??? 1? ? ??? ??? 2? mousedownOffset;????mousedown ??? ?????????? ???? ??? ? ???? ??? mousedown</code? ???? ???. > ???? ???? ???? ???? ??? ?????. ??? ??? ??? ???? ??? ??? ???. ???????? ??? <code>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);
})

實現(xiàn)拖拽的核心

選擇 Vuejs 的原因就是因為其是 MVVM 型框架，我們關(guān)注點在聲明上，內(nèi)部的運(yùn)轉(zhuǎn)機(jī)制有框架負(fù)責(zé)，所以在下面的事件處理上就只需要在對應(yīng)的事件中去更新一開始聲明的三組坐標(biāo)就可以了。

在 onMousedown 時，通過指針?biāo)诘淖鴺?biāo) - 被拖拽元素初始位置的坐標(biāo)得到指針此時在被拖拽元素上的坐標(biāo)，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時，通過指針?biāo)诘淖鴺?biāo) - 指針在被拖拽元素上的位置得到被拖拽元素左上角距離頁面左上角的距離，并更新到 elementPosition：

const onMousemove = (event: MouseEvent) => {
  event.stopPropagation();
  
  elementPosition.x = event.clientX - mousedownOffset.x;
  elementPosition.y = event.clientY - mousedownOffset.y;
}

在 onMouseup時，主要做的就是為 document 移除在 onMousemove 時注冊的兩個事件，要注意的是移除的事件要是同一個事件，也就是引用一致的事件，推薦將對應(yīng)的處理事件賦值給一個變量使用，最后可以在拖拽結(jié)束后還原被拖拽元素的位置：

const onMouseup = (event: MouseEvent) => {
  event.stopPropagation();
  document.removeEventListener('mousemove', onMousemove, true);
  document.removeEventListener('mouseup', onMouseup, true);
  restore();
}

補(bǔ)充其它部分代碼和演示

<div 
 ref="floatButton"
 class="float-button"
 :style="{
    &#39;transition-duration&#39;: &#39;0.1s&#39;,
    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;
}

總結(jié)

使用 mousemove、translate 在 Vue3 中實現(xiàn)可以隨意拖拽的 Icon 的案例就完成了，在本次案例中需要認(rèn)真思考對應(yīng)的幾個坐標(biāo)和移動時坐標(biāo)如何更新，事件的使用要成對出現(xiàn)，如何在這個拖拽的 Icon 上增加點擊事件時還需要多做一些處理，有答案的朋友可以留下你的想法~