How to implement element dragging function? The following article will take you step by step to understand how to use Vue3 to implement an elegant element dragging function, and learn relevant knowledge points through examples. I hope it will be helpful to you!

Recommend a few useful tools

• ##var-conv Suitable for VSCode IDE Quick conversion tool for code variable names
• generator-vite-plugin Quickly generate Vite plug-in template projects
• generator-babel-plugin Quickly generate Babel Plug-in template project

Get to the point

Element dragging is a typical front-end learning case, which requires a certain understanding of JavaScript events. Me too I picked up this content again in my recent work, and explained it clearly by dragging the elements once in a declarative programming style framework such as Vue3. [Related recommendations:

vuejs video tutorial, web front-end development]

PS: The centered attribute in the Vue3 template global style may cause experimental interference, please pay attention! ! !

The position and movement of elements

When implementing element dragging, we use the

mouse event, and the callback of the mouse event The position of the element when the current event occurs can be obtained in the function. The corresponding attributes are clientX and clientY in MouseEvent. We will read these two later. Property to update the element's position in real time. It is recommended to use translate

in

transform to move the element first, instead of modifying top and left## of the element. # Attributes will not cause changes to the element layout, avoiding the performance impact caused by reflow and redrawing. PS: There is an article about the use and experience of translate in

MDN

, you can feel it.

Define three sets of coordinates

define a set of coordinates used to record the initial position of the element (

originalPosition

) and the pointer when the element is pressed The coordinates on the element (mousedownOffset) and a set of coordinates that update in real time as the element moves (elementPosition). Record the coordinates of the initial position of the element. The origin is located in the upper left corner of the page. It is used to restore the position of the dragged element after initialization and dragging. The fixed value does not change:

const originalPosition = reactive({
  x: 10,
  y: 10,
})

The coordinates of the pointer on the element when the element is pressed. The origin is located at the upper left corner of the dragged element. It is obtained by the coordinates of the pointer when pressed - the initial offset position of the element:

const mousedownOffset = reactive({
  x: 0,
  y: 0,
})

The element moves in real time The updated coordinates, the origin is located in the upper left corner of the page, and the initial value should be the same as

originalPosition

. When the mousemove event occurs, the real-time coordinates of the pointer - mousedownOffset are obtained: <pre class='brush:php;toolbar:false;'>const elementPosition = reactive({ x: 0, y: 0, })</pre>

PS: When the origin is the upper left corner of the page, point 1 in the figure represents

originalPosition

or elementPosition, point 2 The point represents the coordinates when the pointer is pressed. When the origin is point 1, point 2 in the figure represents mousedownOffset;

Register mousedown event

When implementing element dragging, you only need to add the

mousedown

event to the dragged element. Remember to clear the listening event after using it. The habit of appearing in pairs must be developed. If you add

mousemove

and mouseup to the dragged element, you will find that there is an out-of-control phenomenon. After the page is loaded, first reset the default position of the dragged element, and add the

mousedown

event. After the component is unloaded, delete the mousedown event:<pre class='brush:php;toolbar:false;'>const restore = () =&gt; { elementPosition.x = originalPosition.x; elementPosition.y = originalPosition.y; } onMounted(() =&gt; { restore(); floatButton.value.addEventListener(&amp;#39;mousedown&amp;#39;, onMousedown, true); }) onUnmounted(() =&gt; { floatButton.value.removeEventListener(&amp;#39;mousedown&amp;#39;, onMousedown, true); })</pre><h3 id="strong-實現(xiàn)拖拽的核心-strong"><strong>實現(xiàn)拖拽的核心</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('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="{
    &#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;
}

總結

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

（學習視頻分享：vuejs入門教程、編程基礎視頻）

The above is the detailed content of Teach you step by step how to use Vue3 to implement an elegant element dragging function. For more information, please follow other related articles on the PHP Chinese website!