Vue はマウス ドラッグ コントロールの幅を実装します

Vue.js は人気のある JavaScript フレームワークであり、フレームワークであるだけでなく、非常に柔軟で強力なライブラリでもあります。このフレームワークにより、開発者はフロントエンド アプリケーションを効率的に実装できます。この記事では、Vue.jsを使ってマウスドラッグによる幅の制御を実装する方法を紹介します。

幅を制御するマウス ドラッグの実装は、境界バーやスライダーをドラッグしてコンテナーのサイズを変更したり、画像のサイズを変更したりするなど、多くの Web アプリケーションで一般的な操作です。このインタラクションの最も基本的な UI 部分は、ドラッグ可能な要素とターゲット要素としてのコンテナです。 Vue.js では、ディレクティブとイベント ハンドラーを使用してドラッグ アンド ドロップを実装します。

最初のステップは、Vue インスタンスでのドラッグをトリガーする命令を定義することです。 「v-draggable」ディレクティブは、ドラッグ可能な要素にバインドする必要があります。このディレクティブは、Vue カスタム ディレクティブ API を使用してグローバルまたはローカル コンポーネントとして登録されます。

Vue.directive('draggable', {
binding(el, binding, vnode) {

  let xOffset = 0;
  let yOffset = 0;

  const handleMouseDown = (event) => {
      if (!event.target.classList.contains('drag-handle')) {
          return;
      }

      xOffset = event.clientX;
      yOffset = event.clientY;

      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
  };

  const handleMouseMove = (event) => {
      const currentX = event.clientX;
      const currentY = event.clientY;

      const dx = currentX - xOffset;
      const dy = currentY - yOffset;

      const newWidth = el.offsetWidth + dx;

      vnode.context[binding.expression] = newWidth;
  };

  const handleMouseUp = () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
  };

  el.querySelector('.drag-handle').addEventListener('mousedown', handleMouseDown);

}
});

ディレクティブ内では、マウスダウンイベント（mousedown）を定義します。イベントをディレクティブのバインディング要素 (el) にバインドします。イベントが発生した後、ドラッグ中に要素の新しい位置を計算できるように、要素に対する相対的なマウス オフセットを記録します。次に、mousemove イベントでオフセットを計算し、新しい幅を計算して、それを Vue インスタンスにバインドします。

最後に、マウス リリース イベント (mouseup) をドキュメント オブジェクトにバインドします。これにより、ユーザーがドラッグ領域を離れた後もマウス リリース イベントが検出され、マウス移動イベントとマウス リリース イベントがクリアされます。リスナー。

次に、「v-draggable」ディレクティブを使用して、ドラッグ要素を Vue コンポーネントの data プロパティにバインドします。

4883ec0eb33c31828b7c767c806e14c7
d1e062c00b82b4850bb5e4d5394a595fドラッグミー16b28748ea4df4d9c2150843fecfba68
c9a53192b147e2a0dd9bf6385c6eeadd16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Vue.component('resizable', {
template: `

<div class="resizable">
  <div class="wrapper">
    <div class="panel-a">
      <div v-draggable="width" class="drag-area">
        <div class="drag-handle"></div>
      </div>
    </div>
    <div class="panel-b" :style="{ width: width + 'px' }"></div>
  </div>
</div>

`,
data() {

return {
  width: 400,
};

},
});

この例では、React コンポーネント「Resizable」を作成します。これは、ドラッグ可能な領域とコンテナーで構成されます。 v-draggable ディレクティブを使用してドラッグ要素を幅の値にバインドし、要素はクラス「drag-area」のコンテナに追加されます。

最後に、コンポーネントを DOM にレンダリングします。

new Vue({
el: '#app',
});

このようにして、Vue.js を使用してマウスのドラッグ アンド ドロップを実装し、ドラッグされた要素の幅。 Vue.js は柔軟性と拡張性に優れているため、この種のインタラクションの開発が非常に簡単になります。

以上がVue はマウス ドラッグ コントロールの幅を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。