要素のドラッグ機(jī)能を?qū)g裝するにはどうすればよいですか?次の記事では、Vue3 を使用してエレガントな要素のドラッグ機(jī)能を?qū)g裝する方法を段階的に説明し、例を通じて関連する知識(shí)ポイントを?qū)W習(xí)します。

#便利なツールをいくつかお?jiǎng)幛幛筏蓼?strong>

##var-conv
• VSCode IDE に適したクイック変換ツールコード変數(shù)名用
generator-vite-plugin
• Vite プラグイン テンプレート プロジェクトを迅速に生成
generator-babel-plugin
• Babel プラグインを迅速に生成-in template project

要點(diǎn)を理解する

要素のドラッグは典型的なフロントエンドの學(xué)習(xí)ケースであり、JavaScript イベントについてのある程度の理解が必要です。最近の仕事でもこの內(nèi)容を再度取り上げ、Vue3 などの宣言型プログラミング スタイルのフレームワークで要素を 1 回ドラッグすることでわかりやすく説明しました。 [関連する推奨事項(xiàng):

vuejs ビデオ チュートリアル

、Web フロントエンド開(kāi)発 ]PS: Vue3 テンプレートのグローバル スタイルの中心屬性は実験的な干渉を引き起こす可能性があります。料金を払ってください。注意！ ！ ！

要素の位置と移動(dòng)

要素のドラッグを?qū)g裝するときは、

mouse

イベントと mouse のコールバックを使用します。 event 現(xiàn)在のイベントが発生したときの要素の位置を関數(shù)で取得することができ、対応する屬性は MouseEvent の clientX と clientY です。これら 2 つは後で読みます。要素の位置をリアルタイムで更新するプロパティ。 transform の

translate

を使用して、top と left## を変更するのではなく、最初に 要素を移動(dòng)することをお?jiǎng)幛幛筏蓼埂?# 屬性によって要素のレイアウトが変更されることはなく、リフローや再描畫(huà)によるパフォーマンスへの影響が回避されます。 PS: MDN

に翻訳の使用と體験に関する記事があり、それを感じることができます。

3 セットの座標(biāo)を定義します。

要素の初期位置 (originalPosition

) とポインターを記録するために使用される座標(biāo)セットを定義します。要素が押されたとき 要素上の座標(biāo) (

mousedownOffset) と、要素の移動(dòng)に応じてリアルタイムで更新される一連の座標(biāo) (elementPosition)。 要素の初期位置の座標(biāo)を記録します。原點(diǎn)はページの左上隅にあります。初期化とドラッグ後にドラッグされた要素の位置を復(fù)元するために使用されます。固定値は、変更しない:

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

要素が押されたときの要素上のポインタの座標(biāo)。原點(diǎn)はドラッグされた要素の左上隅にあります。押されたときのポインタの座標(biāo)によって取得されます -要素の初期オフセット位置:

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

要素はリアルタイムで移動(dòng)します。更新された座標(biāo)、原點(diǎn)はページの左上隅にあり、初期値は

と同じである必要があります。

mousemove

イベントが発生すると、ポインターのリアルタイム座標(biāo) - mousedownOffset が取得されます: <pre class='brush:php;toolbar:false;'>const elementPosition = reactive({ x: 0, y: 0, })</pre>#PS: 原點(diǎn)がページの左上隅の場(chǎng)合、図の點(diǎn) 1 は

originalPosition

または elementPosition

を表し、點(diǎn) 2 はポインタが押されたときの座標(biāo)を表します原點(diǎn)が點(diǎn) 1 の場(chǎng)合、図の點(diǎn) 2 は

mousedownOffset;マウスダウン イベントの登録

要素のドラッグを?qū)g裝する場(chǎng)合、ドラッグされた要素に

mousedown イベントを追加する必要があります。使用後はリスニング イベントを忘れずにクリアしてください。ペアで表示する習(xí)慣を身に付ける必要があります。

ドラッグされた要素に

mousemove と mouseup

を追加すると、制御不能な現(xiàn)象が発生していることがわかります。

ページがロードされたら、まずドラッグされた要素のデフォルトの位置をリセットし、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);
})

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

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

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

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

在 onMouseup時(shí)，主要做的就是為 document 移除在 onMousemove 時(shí)注冊(cè)的兩個(gè)事件，要注意的是移除的事件要是同一個(gè)事件，也就是引用一致的事件，推薦將對(duì)應(yīng)的處理事件賦值給一個(gè)變量使用，最后可以在拖拽結(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 中實(shí)現(xiàn)可以隨意拖拽的 Icon 的案例就完成了，在本次案例中需要認(rèn)真思考對(duì)應(yīng)的幾個(gè)坐標(biāo)和移動(dòng)時(shí)坐標(biāo)如何更新，事件的使用要成對(duì)出現(xiàn)，如何在這個(gè)拖拽的 Icon 上增加點(diǎn)擊事件時(shí)還需要多做一些處理，有答案的朋友可以留下你的想法~

（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）

以上がVue3 を使用してエレガントな要素のドラッグ機(jī)能を?qū)g裝する方法を段階的に説明します。の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。