Vue3 を使用してエレガントな要素のドラッグ機能を実装する方法を段階的に説明します。

要素のドラッグ機能を実装するにはどうすればよいですか?次の記事では、Vue3 を使用してエレガントな要素のドラッグ機能を実装する方法を段階的に説明し、例を通じて関連する知識ポイントを学習します。

#便利なツールをいくつかお勧めします

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

要点を理解する

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

vuejs ビデオ チュートリアル

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

要素の位置と移動

要素のドラッグを実装するときは、

mouse

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

translate

を使用して、top と left## を変更するのではなく、最初に 要素を移動することをお勧めします。 # 属性によって要素のレイアウトが変更されることはなく、リフローや再描画によるパフォーマンスへの影響が回避されます。 PS: MDN

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

3 セットの座標を定義します。

要素の初期位置 (originalPosition

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

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

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

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

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

要素はリアルタイムで移動します。更新された座標、原点はページの左上隅にあり、初期値は

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

mousemove

イベントが発生すると、ポインターのリアルタイム座標 - mousedownOffset が取得されます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>const elementPosition = reactive({ x: 0, y: 0, })</pre><div class="contentsignin">ログイン後にコピー</div></div>#PS: 原点がページの左上隅の場合、図の点 1 は

originalPosition

または elementPosition

を表し、点 2 はポインタが押されたときの座標を表します原点が点 1 の場合、図の点 2 は

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

要素のドラッグを実装する場合、ドラッグされた要素に

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="{
    &#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 中实现可以随意拖拽的 Icon 的案例就完成了，在本次案例中需要认真思考对应的几个坐标和移动时坐标如何更新，事件的使用要成对出现，如何在这个拖拽的 Icon 上增加点击事件时还需要多做一些处理，有答案的朋友可以留下你的想法~

（学习视频分享：vuejs入门教程、编程基础视频）

以上がVue3 を使用してエレガントな要素のドラッグ機能を実装する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。