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

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

青灯夜游

リリース： 2023-03-30 20:57:50

転載

2163 人が閲覧しました

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

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

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

VSCode IDE に適したクイック変換ツールコード変数名用
Vite プラグインテンプレートプロジェクトを迅速に生成
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:js;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(&#39;mousedown&#39;, onMousedown, true);
})

onUnmounted(() => {
  floatButton.value.removeEventListener(&#39;mousedown&#39;, 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(&#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;
}

ログイン後にコピー