この記事では、マルチカラムレイアウトドラッグを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Tencent Cloud Serverの構築方法を説明します(グラフィックチュートリアル)
>>: MySQLが正常にインストールされたかどうかを確認する方法
並べ替えの場合、order by は非常に頻繁に使用するキーワードです。インデックスに関するこれまで...
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...
この場合、transition という単語を間違って書いたため、午後中ずっとそれに取り組みました。本...
Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...
1. 新しいユーザーを追加するローカルIPアクセスのみを許可する '123456' ...
この記事では、カルーセルマップの効果を実現するためのBootstrapの具体的なコードを参考までに共...
目次概要ハッシュプロパティホストプロパティホスト名属性Href属性起源のプロパティユーザー名とパスワ...
この記事では、例を挙げて MySQL のマルチテーブル クエリについて説明します。ご参考までに、詳細...
1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...
概要今日は主に、MySQL データベースから binlog ログを正しく削除する方法を紹介します。ロ...
序文通常、大量のデータを扱う MySQL クエリには「ページング」戦略が採用されます。ただし、ページ...
Docker の人気と成熟に伴い、Docker は徐々にプロジェクトをデプロイするための第一の選択肢...
padding-top パーセンテージを使用すると、固定幅と比例した高さの表示を実現できます。現在の...
MySQL 5.7.20 zipインストール、具体的な内容は次のとおりです(1)圧縮パッケージを解凍...