Effect

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:9000
npm run dev

Install

npm install vue-drag-sort-tree --save

Basic Usage

// demo.Vue
<template>
<div class="hello">
  <div class="tree">
    <tree ref='tree' :treeData="treeData" :options="options"/>
  </div>
</template>

<script>
import Tree from 'vue-drag-sort-tree'
const tree = Tree();

export default {
  name: 'hello',
    components: { tree },
      data() {
        return {
         options: {
            sortKey: 'order',
            parentKey: 'parentId',
            childrenKey: "children",
          },
          treeData: [
            {
              id: 1,
              label: 'id: 1',
              order: 0,
              parentId: null,
              children: []
           }
          ]
    },
   methods: {
    getdata(){
      this.formated = this.$refs.tree.reformatData();
    }
  }
 }

Advantage Usage

// tpl.vue
<template>
  <span class="dragger">{{data.id}}</span>
</template>

<script>
  export default {
    props: {
      d: [Object]
    },
    data() {
      return {
        data: {}
      }
    },
    mounted(){
      this.data = this.d;
    }
  }
</script>

// demo.vue

<script>
...
import tpl from 'tpl.vue'
const tree = Tree(tpl);

...     
options: {
          ...
            handleClass: "dragger"
          },
          ....

</script>

Contact me

vimmingshe@gmail.com