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

Vue 再帰コンポーネント

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

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

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

ドラッグイベント

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

次に、 dragend 、 dragover 、 drop 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 dragend 、 eventBusを介してこのインデックスを取得し、配列から削除でき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です。取得できる値はmove 、 copy 、 none 、 linkです。下図では、 dropEffectが🚫のとき、ドラッグポイントが消えます。実は、 dragendイベントのコードは実行されるのに対し、 dropイベントのコードは実行されないので、このステップではまずプロセス制御が必要です。さらに、360 ブラウザなど、異なるブラウザのデフォルトのdropEffectも異なります。