Vue.js的功能强大的可拖动层次列表组件。

变更日志：

v2.6.0（2020年8月27日）

• 将过时的Event.srcElement替换为Event.target。

特征：

• 通过将项目拖到另一个项目上方来对其重新排序
• 通过向右拖动直观地嵌套项目
• 完全可定制，不带CSS
• 一切都是可配置的：项目标识符，最大嵌套级别，嵌套阈值

安装和下载：

# NPM
$ npm install vue-nestable --save

在您的应用中使用插件：

import Vue from 'vue'
import VueNestable from 'vue-nestable'

Vue.use(VueNestable)

如果您愿意，也可以按需导入组件：

import { VueNestable, VueNestableHandle } from 'vue-nestable'

export default {
  components: {
    VueNestable,
    VueNestableHandle
  }
  ...
}

您只需要两个组件：vue-nestable呈现列表和 vue-nestable-handle指示用户可以拖动项目的区域。

重要说明：每个项目都必须具有唯一的id属性，并且必须是有效的CSS类名称。它不能包含:，,，.，;或其他特殊字符是一个CSS类名无效。

<template>

  <vue-nestable v-model="nestableItems">
    <vue-nestable-handle
      slot-scope="{ item }"
      :item="item">
      {{ item.text }}
    </vue-nestable-handle>
  </vue-nestable>

</template>

<script type="text/babel">
export default {
  data () {
    return {
      nestableItems: [
        {
          id: 0,
          text: 'Andy'
        }, {
          id: 1,
          text: 'Harry',
          children: [{
            id: 2,
            text: 'David'
          }]
        }, {
          id: 3,
          text: 'Lisa'
        }
      ]
    }
  }
}
</script>

---

官网：https://github.com/rhwilr/vue-nestable

演示：https://www.vue365.cn/code_demo.php?id=1380

GitHub下载：https://github.com/rhwilr/vue-nestable/archive/master.zip