首頁 > 文章 > web前端 > 手把手教你使用Vue3實作一個飄逸元素拖曳功能

手把手教你使用Vue3實作一個飄逸元素拖曳功能

青灯夜游轉載: 2023-03-30 20:57:502140瀏覽

怎麼實現元素拖曳功能？以下這篇文章一步一步帶大家了解如何使用Vue3實作一個飄逸元素拖曳功能，並在實例中了解相關知識點，希望對大家有幫助！

進入正題

元素拖曳是比較典型的前端學習案例，需要對JavaScript 的事件有一定的了解，我也是在最近的工作中才重新拾起了這塊內容，透過在Vue3 這種聲明式程式設計風格的框架中把元素拖曳一次講清楚。【相關建議：

vuejs影片教學、web前端開發】

#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 事件：<pre class="brush:js;toolbar:false;">const restore = () => { elementPosition.x = originalPosition.x; elementPosition.y = originalPosition.y; } onMounted(() => { restore(); floatButton.value.addEventListener(&#39;mousedown&#39;, onMousedown, true); }) onUnmounted(() => { floatButton.value.removeEventListener(&#39;mousedown&#39;, onMousedown, true); })</pre><h3 data-id="heading-7"><strong>实现拖拽的核心</strong></h3> <p>选择 <code>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(&#39;mousemove&#39;, onMousemove, true);
  document.addEventListener(&#39;mouseup&#39;, 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(&#39;mousemove&#39;, onMousemove, true);
  document.removeEventListener(&#39;mouseup&#39;, onMouseup, true);
  restore();
}

补充其它部分代码和演示

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