Vueは複数列レイアウトドラッグを実装します

Vueは複数列レイアウトドラッグを実装します

この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. 目的

Vue は、複数のボックスの自由なドラッグと幅の変更を実装します (ユーザーは実際のシナリオに基づいてボックスの数を決定します)。

2. 応用シナリオ

幅を自由にドラッグできる複数列レイアウト。

最も一般的なケース:エディター(例: vscode、idea など)

コンポーネント設計

このコンポーネントのボックス数は不明なので、コンポーネントの設計にはVuetifyの Form と FormItem の設計を参考にしました。つまり、外側の大きなボックスは分散ドラッグ イベントを処理し、内側のボックスは各アイテムの内容を表示する役割を担います。

コンポーネント設計により、次の目標が達成されます。

<ドラッグボックススタイル="幅: 100%; 高さ: 100%;">
   <ドラッグアイテム>アイテム1</ドラッグアイテム>
   <drag-item>項目2</drag-item>
   <ドラッグアイテム>アイテム3</ドラッグアイテム>
   <ドラッグアイテム>アイテム4</ドラッグアイテム>
</ドラッグボックス>

4. 実装

4.1 dragBox 静的ページ

(サブ要素のネストはスロットを通じて実現されます)

<テンプレート>
    <div ref='dragBox' style='display: flex; 幅: 100%; 高さ: 100%;'>
        <スロット></スロット>
    </div>
</テンプレート>

4.2 ドラッグアイテムページ

(ドラッグアイテムの内部要素のネストはスロットを通じて実現されます)

<テンプレート>
    <div ref="container" class="d-flex" style="min-width: 200px; position: relative;">
        <div スタイル="幅: 100%; 高さ: 100%;">
            <slot>デフォルト情報</slot>
        </div>
  <!-- ドラッグバー -->
        <div v-if="resizeShow" class="resize" />
    </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  小道具: {
  // ドラッグバーを表示するかどうかを制御します。デフォルトでは表示されます resizeShow: {
      タイプ: ブール値、
      デフォルト: true
    }
  }
}
</スクリプト>
<スタイル>
.サイズ変更{
    位置: 絶対;
    上: 0;
    右: 0;
    幅: 4px;
    高さ: 100%;
    カーソル: col-resize;
    背景色: #d6d6d6;
}
</スタイル>

4.3 ドラッグロジック

ドラッグ ロジックは dragItem ではなく dragBox によって処理される必要があります。

4.3.1 ドラッグを実装する前に、子要素 (dragItem など) を適切にレイアウトする必要があります。

ユーザーがdragItem に初期幅を割り当てない場合は、デフォルトの flex:1が使用されます (残りのスペースは均等に分散されます)。具体的なロジックは次のとおりです。

 // dragItem が幅を定義していない場合は、flex=1
    ドラッグアイテムフレックスを設定する(){
      const dragBox = this.$refs.dragBox
      const childrenLen = ドラッグボックスのchildren.length

      (i = 0; i < childrensLen; i++) の場合 {
        定数ノード = dragBox.children[i]
        ノードスタイルの幅が等しい場合
          // 幅が定義されていない場合はflex=1
          ノードスタイルフレックス = 1
        }
      }
    },

4.3.2 ドラッグアンドドロップの実装ロジック

各 dragItem のドラッグ バーにドラッグ イベントを追加する必要があります。完全なドラッグ イベントには、マウスの押下、マウスの移動、マウスのリフト (ドラッグの終了) が含まれます。

各ドラッグ バーにイベントを追加するループ:

ドラッグコントローラDiv() {
  const resize = document.getElementsByClassName('resize') // ドラッグバー // 各ドラッグバーのイベントを追加するためのループ for (let i = 0; i < resize.length; i++) {
    // マウス押下イベント resize[i].addEventListener('mousedown', this.onMouseDown)
  }
},

マウスプレスロジック: マウスの初期位置を取得し、ドラッグバーの色を変更し、移動と上へのリスナーイベントを追加します。

マウスダウン時(e) {
  this.resizeBox = e.target
  this.currentBox = this.resizeBox.parentNode // 現在のボックス this.rightBox = this.getNextElement(this.currentBox) // 現在のボックスの次の兄弟ノード if (!this.rightBox) return
  this.curLen = this.currentBox.clientWidth
  this.otherBoxWidth = this.$refs.dragBox.clientWidth - this.currentBox.clientWidth - this.rightBox.clientWidth // 他のボックスの幅 // 色変更のリマインダー this.resizeBox.style.background = '#818181'
  this.startX = e.clientX
  document.addEventListener('mousemove', this.onMousemove)
  document.addEventListener('mouseup', this.onMouseup)
},

// 次の兄弟要素を取得するcompatible function getNextElement (element) {
  if (要素.nextElementSibling) {
    element.nextElementSibling を返す
  } それ以外 {
    var next = element.nextSibling // 次の兄弟ノード while (next && next.nodeType !== 1) { // 存在するが、必要なものではない next = next.nextSibling
    }
    次へ戻る
  }
}

マウス移動イベント: 現在のボックスと右のボックスの幅を計算して設定します。

マウスを動かすと(e){
  定数 endX = e.clientX
  const moveLen = endX - this.startX // (endx-startx) = 移動距離 const CurBoxLen = this.curLen + moveLen // resize[i].left + 移動距離 = 左領域の最終幅 const rightBoxLen = this.$refs.dragBox.clientWidth - CurBoxLen - this.otherBoxWidth // 右幅 = 合計幅 - 左幅 - 他のボックス幅 // 最小幅に達すると、ドラッグは利用できなくなります if (CurBoxLen <= 200 || rightBoxLen <= 200) return
  this.currentBox.style.width = CurBoxLen + 'px' // 現在のボックスの幅 this.resizeBox.style.left = CurBoxLen // 左領域の幅を設定 this.rightBox.style.width = rightBoxLen + 'px'
},

マウスアップイベント: mousedown イベントと mousemove イベントを破棄し、ドラッグバーの色を復元します。

マウスアップ時(){
 // 色の復元 this.resizeBox.style.background = '#d6d6d6'
 document.removeEventListener('mousedown', this.onMouseDown)
 document.removeEventListener('mousemove', this.onMousemove)
},

マウントされたフック関数に対応するイベントを追加します。

マウントされた(){
  this.setDragItemFlex()
  this.dragControllerDiv()
},

コンポーネントをインポートして登録します。

<テンプレート>
  <div id="app" style="幅: 100%; 高さ: 100vh; 境界線: 1px solid #ccc;">
    <ドラッグボックススタイル="幅: 100%; 高さ: 100%;">
      <drag-item style="width: 20%;">項目1</drag-item>
      <drag-item>項目2</drag-item>
      <drag-item style="width: 20%;" :resizeShow='false'>項目3</drag-item>
    </ドラッグボックス>
  </div>
</テンプレート>

<スクリプト>
'./components/dragLayouter' から {DragBox, DragItem} をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  コンポーネント:
    ドラッグボックス、
    ドラッグアイテム
  }
}
</スクリプト>

5. 運用結果

特定のスタイルは後で変更できます。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue3.0はvue-grid-layoutプラグインを使用してドラッグレイアウトを実装します。
  • Vue3 ドラッグ可能な左パネルと右パネルの分割コンポーネントの実装
  • Vue コード分割 (codesplit) の実装
  • Vueはドラッグアンドドロップ分割レイアウトを実装

<<:  Tencent Cloud Serverの構築方法を説明します(グラフィックチュートリアル)

>>:  MySQLが正常にインストールされたかどうかを確認する方法

推薦する

MySQLは「order by」がどのように機能するかを簡単に理解します

並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

Mysql5.7 のグループ連結関数を使用するときにデータが切り捨てられる問題に対する完璧な解決策

一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...

CSS3は、変換変形とイベントを組み合わせて扇形のナビゲーションを完成させます。

この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...

Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...

MySql への新しいユーザーの追加、ユーザー用のデータベースの作成、ユーザーへの権限の割り当ての概要

1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...

Bootstrapはカルーセルの効果を実現します

この記事では、カルーセルマップの効果を実現するためのBootstrapの具体的なコードを参考までに共...

JavaScriptのURLオブジェクトとは何かについて話しましょう

目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...

MySQL マルチテーブルクエリ例の詳しい解説 [リンククエリ、サブクエリなど]

この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...

効率的なMySQLページングの詳細な説明

序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...

docker を使用して Django テクノロジー スタック プロジェクトをデプロイする方法

Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...

CSSは高さと幅を固定した要素の比例表示効果を実現します

padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...

MySQL 5.7.20 zip インストール チュートリアル

MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...