「vue-draggable-nested-tree」でドラッグ要素をツリー形式で配置する

2019年11月6日

「vue-draggable-nested-tree」でWordpressのウィジェットみたいなものが作れそう

コメント欄より(2021.05.11)

asw様 より

https://github.com/phphe/vue-draggable-nested-tree
Please use the he-tree-vue, vue-draggable-nested-tree will no longer be maintained.

he-tree-vueに移行してくださいとのこと。

本業が落ち着きましたら、記事を更新します・・・

 

vue-draggable-nested-treeとは

vue-draggable-nested-treeは、ドラッグ要素をツリー形式に配置することが可能なdraggable&droppableコンポーネントライブラリです。

tree-helper.js を使用することで、折りたたみを実装することも可能です。

 

「vue-draggable-nested-tree」でWordpressのウィジェットみたいなものが作れそう

 

インストール

以下のnpmCDNを使ってインストールします。

npm

npm i vue-draggable-nested-tree

CDN

<script src="https://unpkg.com/vue-draggable-nested-tree@latest/dist/vue-draggable-nested-tree.js"></script>
<script src="https://unpkg.com/tree-helper@latest/dist/tree-helper.js"></script>

 

gitリポジトリは以下から取得できます。

https://github.com/phphe/vue-draggable-nested-tree

 

導入手順

1. ライブラリの取り込み

(1)webpack等の場合 [注意]モジュール版は未検証です。

import {DraggableTree} from 'vue-draggable-nested-tree'

(2)WEBページの場合

const th = window.treeHelper
const {DraggableTree} = window.vueDraggableNestedTree;

2.メソッドを設定

Vue.componentに上記で取得した DraggableTree を読み込ませます。

tree-helper.js と使うことで ツリーの開閉を行うことができます。
expandAllcollapseAll  メソッドで開閉機能を実装しています。

Vue.component('tree', DraggableTree);

let app = new Vue({
  el: '#app',
  data: {
    tree1data: [
      {text: 'node 1'},
      {text: 'node 2'},
      {text: 'node 3 undraggable', draggable: false},
      {text: 'node 4 undroppable', droppable: false},
      {text: 'node 5', children: [
        {text: 'node 6'},
        {text: 'node 7'},
      ]},
    ],
    tree2data: [
      {text: 'node 8', children: [
        {text: 'node 9'},
        {text: 'node 10 undroppable', droppable: false, children: [
          {text: 'node 11'},
          {text: 'node 12'},
        ]},
        {text: 'node 13', children: [
          {text: 'node 14'},
          {text: 'node 15 undroppable', droppable: false},
        ]},
        {text: 'node 16'},
        {text: 'node 17'},
        {text: 'node 18'},
      ]},
    ]
  },
  methods: {
    expandAll() {
      th.breadthFirstSearch(this.tree1data, node => {
        node.open = true
      })
    },
    collapseAll() {
      th.breadthFirstSearch(this.tree1data, node => {
        node.open = false
      })
    },
  },
});

3. テンプレートを準備

<tree> タグを設定します。
data プロパティにドラッグ要素のリストデータを設定します。

<div id="app">
  <div class="row">
    <div class="col-3">
      <tree :data="tree1data" draggable="draggable" cross-tree="cross-tree">
        <div slot-scope="{data, store}">
          <template v-if="!data.isDragPlaceHolder">
            <b v-if="data.children &amp;&amp; data.children.length" @click="store.toggleOpen(data)">{{data.open ? '-' : '+'}}&nbsp;</b>
            <span>{{data.text}}</span>
          </template>
        </div>
      </tree>
    </div>
    <div class="col-3">
      <tree :data="tree2data" draggable="draggable" cross-tree="cross-tree">
        <div slot-scope="{data, store}">
          <template v-if="!data.isDragPlaceHolder">
            <b v-if="data.children &amp;&amp; data.children.length" @click="store.toggleOpen(data)">{{data.open ? '-' : '+'}}&nbsp;</b>
            <span>{{data.text}}</span>
          </template>
        </div>
      </tree>
    </div>
  </div>
</div>

4. スタイル

デフォルトですとスタイルが存在しないため、サンプル用のCSSを準備します。

.he-tree{
  border: 1px solid #ccc;
  padding: 20px;
  width: 300px;
}
.tree-node-inner{
  padding: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}
.draggable-placeholder-inner{
  border: 1px dashed #0088F8;
  box-sizing: border-box;
  background: rgba(0, 136, 249, 0.09);
  color: #0088f9;
  text-align: center;
  padding: 0;
  display: flex;
  align-items: center;
}
.row .col-3 {
  float: left;
}

 

サンプル

>>専用ページで確認する

 

さいごに

ドラッグ要素をツリー形式に配置することが可能なdraggable&droppableコンポーネントでした。

vue-draggable-nested-tree を使えばWordPressのメニューみたいなものが作れそうな気がします。

Wordpressのメニュー

 

通常のドラッグアンドドロップを使用したい場合は以下の記事がおすすめ

Vue.jsでドラッグ&ドロップするなら「Vue.Draggable」がおすすめ

 

今日はこの辺でー

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Drag and Drop, UI Components, vue.js, ライブラリ
-, , , , , , ,