Vue はマウスドラッグコントロールの幅を実装します-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-11 12:49:37

オリジナル

1970 人が閲覧しました

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 プロパティにバインドします。

ドラッグミー

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() {