Vueはドラッグアンドドロップを使用して構造ツリーを作成します

<テンプレート>
  <div class="コンテナ">
    <div class="node-container">
      <div v-for="(item, index) ノードリスト内"
           :key="インデックス"
           クラス="ソースノード"
           ドラッグ可能="true"
           @dragstart="dragStart(アイテム)">
        {{ アイテム }}
      </div>
    </div>
    <div class="ツリーコンテナ"
         @dragover="ドロップを許可"
         @drop="ハンドルドロップ">
      <tree-node v-if="nodeData"
                 ref="ノード"
                 :nodeData="ノードデータ"
                 @delete-node="ツリーを削除" />
    </div>
  </div>
</テンプレート>
<スクリプト>
'./treeNode.vue' から TreeNode をインポートします。
'./config.js' から { Node } をインポートします。
エクスポートデフォルト{
  名前: 'vue-tree'、
  コンポーネント:
    ツリーノード
  },
  // 子孫ノードはノードデータを取得できない、つまり独立してノードを作成できないため、祖先ノードのノード作成メソッドが子孫ノードに公開されます provide() {
    戻る {
      ノードを作成: this.createNode
    }
  },
  データ （） {
    戻る {
      ノードリスト: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
      currNode: null、
      ノードデータ: null
    }
  },
  メソッド: {
    // ドラッグを開始し、ノードデータを取得します dragStart (item) {
      this.currNode = アイテム
    },
    // ルートノードが生成されていない場合はドラッグが許可されますallowDrop (event) {
      if (!this.nodeData) {
        イベント.preventDefault()
      }
    },
    //ドラッグ終了、ノード生成 handleDrop() {
      if (!this.nodeData) {
        this.nodeData = this.createNode()
      }
    },
    ノードを作成します（）{
      ノード = 新しいノード(this.currNode)
      戻りノード
    },
    // ルートノードを削除し、ツリー全体を削除します deleteTree() {
      this.nodeData = null
    }
  }
}
</スクリプト>
<style lang="scss" スコープ>
。容器 {
  パディング: 20px;
  幅: calc(100% - 40px);
  高さ: calc(100% - 40px);
  .ノードコンテナ{
    高さ: 100px;
    境界線: 1px 破線の赤;
    ディスプレイ: フレックス;
    .ソースノード{
      幅: 50px;
      高さ: 30px;
      背景: #fff;
      境界線: 1px 青
      テキスト配置: 中央;
      行の高さ: 30px;
      マージン: 10px;
      カーソル: ポインタ;
    }
  }
  .tree-container {
    高さ: calc(100% - 122px);
    上マージン: 20px;
  }
}
</スタイル>

エクスポートクラスNode{
  コンストラクタ(名前){
    this.name = 名前、
    this.children = []
  }
}

<テンプレート>
  <!-- 
    構造: 最も外側の層はノードインナーです。各ノードインナーにはノードとノードボックスが含まれます。ノードには現在のノードが格納され、ノードボックスには現在のノードのすべての子ノードが格納されます。現在のノードに複数の子ノードがある場合は、ノードボックスに複数のノードインが存在します。
        <ノード></ノード>
        <ノードボックス>
          <ノード内部>
            <ノード></ノード>
            <ノードボックス>...</ノードボックス>
          </ノードインナー>
          <ノード内部>
            <ノード></ノード>
            <ノードボックス>...</ノードボックス>
          </ノードインナー>
          ...
        </ノードボックス>
      </ノードインナー>
   -->
  <div class="node-inner">
    <div class="node"
         :class="{'drag-over-node': isDragover }"
         @dragover="ドラッグオーバー"
         @dragleave="ドラッグ終了"
         @drop="ノードドロップ">
      <span class="name">{{nodeData.name}}</span>
      <span class="del"
            @click="deleteNode">削除</span>
    </div>
    <div v-show="nodeData.children.length > 0"
         クラス="ノードボックス">
      <tree-node v-for="(item,index) in nodeData.children"
                 :key="インデックス"
                 :nodeData="アイテム"
                 @delete-node="deleteChild(インデックス)" />
    </div>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'ツリーノード',
  小道具: {
    ノードデータ: {
      タイプ: オブジェクト、
      デフォルト: () => { }
    }
  },
  // 祖先ノードから渡されたデータを取得する inject: ['createNode'],
  データ （） {
    戻る {
      isDragover: false
    }
  },
  メソッド: {
    // ノードはドラッグして子ノードを追加できるようにします dragOver (event) {
      イベント.preventDefault()
      if (!this.isDragover) {
        this.isDragover = true
      }
    },
    ドラッグ終了() {
      if (this.isDragover) {
        this.isDragover = false
      }
    },
    // ノードに子ノードを追加する nodeDrop () {
      ノード = this.createNode() とします。
      this.nodeData.children.push(ノード)
      this.isDragover = false
    },
    // 現在のノードを削除します。これは基本的に、子ノードを削除するために親に渡すことを意味します。deleteNode () {
      this.$emit("ノードを削除")
    },
    // 子ノードを削除する命令を受け取り、削除関数を実行する deleteChild (index) {
      this.nodeData.children.splice(インデックス、1)
    }
  }
}
</スクリプト>
<style lang="scss" スコープ>
.ノード{
  境界線: 1px 実線オレンジ;
  境界線の半径: 4px;
  位置: 相対的;
  ディスプレイ: インラインフレックス;
  アイテムの位置を中央揃えにします。
  コンテンツの両端揃え: スペースの間;
  背景色: #fff;
  高さ: 36px;
  パディング: 0 12px 0 16px;
  行の高さ: 36px;
  下マージン: 10px;
  。名前 {
    フォントサイズ: 16px;
    右マージン: 12px;
  }
  .del {
    色: 赤;
    フォントサイズ: 12px;
    カーソル: ポインタ;
  }
  &.ノード上にドラッグ{
    ボックスの影: 6px 6px 12px rgba(106, 20, 134, 0.15);
  }
}
.ノードボックス{
  ディスプレイ: インラインフレックス;
  flex-direction: 列;
  .node-inner {
    左マージン: 80px;
    // 縦棒をつなげる&:not(:last-child):before {
      位置: 絶対;
      左: -70px;
      上: 22px;
      境界線: 1px 実線オレンジ;
      コンテンツ： "";
      幅: 8px;
      背景色: #fff;
      境界線下部の色: #fff;
      高さ: 100%;
      上の境界線の色: #fff;
      zインデックス: 3;
    }
    // 水平バーを接続&:after {
      左: -61px;
      幅: 60ピクセル;
      コンテンツ： "";
      位置: 絶対;
      上: 14px;
      高さ: 8px;
      境界線: 1px 実線オレンジ;
      コンテンツ： "";
      背景色: #fff;
      右境界線の色: #fff;
      左境界線の色: #fff;
      zインデックス: 3;
    }
    // 最後の縦棒の角は丸い &:nth-last-child(2):before {
      左下の境界線の半径: 6px;
      境界線下部の色: オレンジ;
    }
    // 最初の水平バーが拡張されます &:first-child:after {
      左: -81px;
      幅: 80ピクセル;
      zインデックス: 2;
    }
  }
}
.node-inner {
  位置: 相対的;
}
</スタイル>