vuedraggable树形组件

想找一个好自定义的树形组件都找吐了,用vuedraggable自己写,体验真的挺不错

我的需求只有一层,需要多层的话,自己循环嵌套一下

大概有几个点

1. group要一样
2. transition-group 用来做动画,我习惯于300ms的动画,流畅和快的平衡点
3. v-model也要嵌套一下
4. move方法很重要,你自己要加的规则都是在这里

<template>
  <draggable
    v-model="treeData"
    :group="group"
    animation="300"
  >
    <transition-group>
      <div v-for="item in treeData">
        <!-- 两种, group和children -->
        <div v-if="item.children.length">
          <draggable
            v-model="item.children"
            :group="group"
            animation="300"
          >
            <transition-group>
                <div v-for="child in item.children">{{child}}</div>
            </transition-group>
          </draggable>
        </div>
        <!-- 节点 -->
        <div v-else>{{item}}</div>
      </div>
    </transition-group>
</template>

group的结构

const group = {
  name: 'super',
  put: true,
  pull: true,
}

move的写法

    const handleMove = (e) => {
      const dragId = e.draggedContext.element
      const dropId = e.relatedContext.element

      // 用两个id来进行校验, 不允许停靠的就返回false
      // 不允许停靠也就不会被放到该位置
      if(条件)return false
    }

样式就自己发挥就好了