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/[email protected]/dist/vue-draggable-nested-tree.js"></script>
<script src="https://unpkg.com/[email protected]/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」がおすすめ

 

今日はこの辺でー

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください