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で電子メールアラートを実装する方法

推薦する

Maven+Tomcat 基本イメージを構築する Docker の実装

序文Javaプログラミングでは、ほとんどのアプリケーションはMavenに基づいて構築されており、配信...

Vueフレームワークで習得しなければならない重要な知識を学びます

1. Vueとは何かVue は、ユーザー ページを構築するためのプログレッシブ フレームワークです。...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

美容・スタイリングウェブサイト向けのカラーマッチングテクニックと効果表示

色はあらゆるウェブサイトにとって最も重要な要素の 1 つであり、閲覧者に大きな影響を与えるため、色の...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

MySQL で日付時刻データを取得し、その後に .0 を追加する方法

MySQL のデータ型は datetime です。データベースに保存されているデータは 2015-0...

ZFS とは何か? ZFS を使用する理由とその機能

ZFSの歴史Z ファイル システム (ZFS) は、2001 年に Matthew Ahrens と...

MySQLの累積集計原理と使用例の分析

この記事では、例を使用して、MySQL 累積集計の原理と使用方法を説明します。ご参考までに、詳細は以...

win10にUbuntu18デュアルシステムをインストールするとmmx64.efiが見つからないという問題が発生する

Ubuntu 18のインストール中に、USBディスクからUbuntuのインストールを開始すると、mm...

MySQLデータベースのSYNフラッディング問題を解決する

Syn 攻撃は、最も一般的で最も簡単に悪用される攻撃方法です。TCP プロトコルの欠陥を利用して、偽...

自作の Windows サーバーに egg アプリケーションを展開する方法 (画像とテキスト付き)

1. IEブラウザを使用してVPNにログインする 2. リモートログイン 3. サーバーに最新のn...

JSは画像の滝の流れの効果を実現します

この記事では、画像ウォーターフォールフローを実現するためのJSの具体的なコードを参考までに共有します...

Docker 接続 MongoDB 実装プロセスとコード例

コンテナが起動した後まず管理者にログインして新しいユーザーを作成してください $ docker ex...

JavaScript プロトタイプオブジェクトの this ポイント問題の詳細な説明

目次1. これは2. この点を修正する1. call() メソッド2. apply() メソッド要約...

Centos7でglibcをアップグレードするとシステム異常(起動できない)になる場合の解決方法

目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...