Vueはドラッグ可能なツリー構造図を実装します

Vueはドラッグ可能なツリー構造図を実装します

最近、Vue を使用して、ドラッグ可能なツリー構造図という小さなプロジェクトを作成しました。

Vue 再帰コンポーネント

この構造はVueの再帰コンポーネントを通じて実装されている。

レイアウトはフレックスを使用し、構造線はCSS疑似クラスによって実装されています。

注意すべき点は、中央揃えレイアウトの場合、X 軸上の要素が多すぎて子要素の幅がビューを超えてしまうと、要素が中央揃えされた後にスクロール バーはあるものの、右側のコンテンツにしか届かず、左側のコンテンツにはアクセスできなくなることです。親要素を inline-flex に設定し、幅を auto に設定することができます。もちろん、上記のような構造であれば、このような問題は発生しませんが、ビッグデータのレンダリングとなると、やはり午後は悩みました。

ドラッグイベント

まず、ドラッグしたい要素にドラッグ可能な属性をバインドします。デフォルトでtrueに設定されている<a>タグと<img>タグを除き、他のすべての要素は次のように設定する必要があります。

次に、 dragenddragoverdrop 3 つのイベントがあります (Vue で記述されているため、イベントの前に追加しないでください)。

dragoverではデフォルトの動作を削除し、イベントに$event.preventDefault()を指定する必要があることに注意してください。そうしないと、ドラッグ時にマウスに 🚫 記号が表示され、ドラッグが無効になります。

ドラッグされた要素の値をドロップされた場所に転送するには、 $event.dataTransfer.setData("node", transNodeData)を使用する必要があります。

"node"は渡されるデータの変数名と同等であり、 JSON.stringify()である必要があります。

方法:{
    ドラッグスタート(e,nodeObj){
      console.log('🐉ドラッグ移動ポイント',nodeObj.name,);
      let transData = JSON.stringify(nodeObj) //ドラッグによって渡されたデータはまずJSON形式に変換されます e.dataTransfer.setData("node", transData)
    },
    ドラッグオーバー(e){
      e.preventDefault()
    },
    ドロップ(e,nodeObj){
      console.log('🐉dropped to',nodeObj.name);
      getData = JSON.parse( e.dataTransfer.getData("node")) とします。
      console.log('データを取得',getData);
    }
  }

これを踏まえて、次にやるべきことは、取得したドラッグポイントデータを配置ポイントのchildren配列に入れ、 dragendイベントで親ノードのchildren配列からドラッグポイントを削除することです。ノードのインデックスは、 dragstartイベントがトリガーされたときに取得され、 eventBusコンポーネント通信メソッド ( Vuexも使用可能) を介してdragendに渡されます。

バスフォルダを作成し、新しいindex.jsファイルを作成します。

「vue」からVueをインポートします
定数busEvent = 新しいVue({
  データ(){
    戻る {
      dragNodeIndex:-1, //親ノードの子配列内のドラッグノードのインデックス
    }
  },
  作成された(){
    this.$on("transDragNodeIndex", res=>>/$on を通じて $emit を監視するには、カスタム イベントがトリガーされる前に監視されていることを確認する必要があります。つまり、サブスクリプションがパブリッシュに先行します。そうしないと、データを監視できません。私は eventBus をあまり使用していないので、これは落とし穴です。this.dragNodeIndex=res
    })
  }
})

デフォルトの busEvent をエクスポートする

コンポーネントにeventBusを導入します。dragstart で$emit介してカスタム イベントをトリガーした後、 $onこのデータを受信できます。dragend dragendeventBusを介してこのインデックスを取得し、配列から削除できdragstart

次のステップは、いくつかの論理的判断を下すことです。たとえば、親ノードを子ノードにドラッグできない場合は、まず親ノード上のすべての子ノードの名前を再帰的に走査して配列に格納します。ドロップ位置のnameが配列内にある場合、親が子にドロップされていることを意味し、状態は true に設定されます。

ifFatherDragToSon(dragObj,dropObj){//親ノードが子ノードに移動したかどうかを判断しますif (dragObj.children.length === 0) false を返します。
      newArr = [] とします。
      関数 getAllName(dragObj) {
        新しいArr.push(...dragObj.children);
        (dragObj.children.length === 0)の場合{
          戻る;
        } それ以外 {
          (i = 0 とします; i < dragObj.children.length; i++) {
            getAllName(dragObj.children[i]);
          }
        }
      }
      getAllName(ドラッグオブジェクト);
      newArr.includes(dropObj) の場合 {
        true を返します。
      }
      false を返します。
    }

eventBusを使用してdragendイベントのステータスを取得し、それがtrueの場合は直接返します。

自分自身にドラッグしても機能せず、直接戻るだけです。 「Li Hu Chong」ポイントの下に子ノードが追加されます。これは主に、 name属性に基づくのではなく、スタック内のノードのアドレスが判断に使用されることを確認するためです。

もう一つ特筆すべきは、ドラッグイベントの$event.dataTransfer.dropEffectです。取得できる値はmovecopynonelinkです。下図では、 dropEffectが🚫のとき、ドラッグポイントが消えます。実は、 dragendイベントのコードは実行されるのに対し、 dropイベントのコードは実行されないので、このステップではまずプロセス制御が必要です。さらに、360 ブラウザなど、異なるブラウザのデフォルトのdropEffectも異なります。

コード接続

以上がVueのドラッグ可能なツリー構造図の実装の詳細内容です。Vueのツリー構造図の実装の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue の一時停止されたドラッグ可能なフローティング ボタンのサンプル コード
  • vue draggable resizable はドラッグ可能なスケーリングのコンポーネント機能を実現します
  • Vueは、element-uiダイアログボックスのドラッグ可能な機能を実装します。
  • Vueはechartsを使用して組織図を描画します
  • Vueカスタムツリー構造図を実装する方法

<<:  Mysql 5.7.19 無料インストール バージョンで遭遇した落とし穴 (コレクション)

>>:  Zabbixで電子メールアラートを実装する方法

推薦する

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

HTML テーブルタグチュートリアル (45): テーブル本体タグ

<tbody> タグは、テーブル本体のスタイルを定義するために使用されます。基本構文 &...

mysqldump でデータベースをバックアップするときに特定のライブラリを除外する例

例: mysqldump –all-databases を使用すると、すべてのライブラリがエクスポー...

HTML の左右レイアウトのサンプルコード

CS: ...コードをコピーコードは次のとおりです。 html,body{ margin:0px; ...

MySQLインデックスの詳細

1. インデックスの原則インデックスは、列内の特定の値を持つ行をすばやく見つけるために使用されます。...

SQLデータベースの14の事例の紹介

データシート /* Navicat SQLite データ転送 ソースサーバー: school ソース...

HTMLテーブルタグの詳しい解説(初心者向け)

表> <TR> <TD> <TH> <キャプション&...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...

Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法

1. SpringBoootプロジェクトを作成し、jarパッケージにパッケージ化する2. Linux...

ブートストラップ学習体験のまとめ - CSS スタイル デザイン共有

プロジェクトのニーズにより、ブートストラップ フレームワークを慎重に学習する予定です。以前から少しは...

Vueバックグラウンド管理に多言語機能を追加する例

目次1.まず、main.jsページを設定します2. 対応するパスの下で言語パックを構成します。ここに...

MySQL でのログインを取り消す

コンセプト紹介: MySQL の redo ログにはトランザクションの動作が記録されることはご存じの...

MySQLデッドロック問題の詳細な分析

序文私たちのビジネスがまだ初期段階にあり、同時実行の度合いが比較的低い場合、数年間はデッドロックの問...