vuedraggable使用

1.引入vuedraggable

2.vuedraggable标签内部套用递归组件，一般用于tree拖拽，数据结构为id pid形式

3.配置：

dragOptions: {

        animation: 200,    --------------- 动画

        group: {

          name: 'g1'

        },

        sort: true,

        disabled: false,

        ghostClass: 'ghost',

        handle: '.mover'   -----------------  拖拽对象类名

      }，

chapters: []，                   --------------------------   可拖拽的数据对象

draggable: true -----------------------------------------是否可拖拽

4.方法：

datadragEnd() {

    // 如何处理数据

},

:move="moveMenu",用来校验拖拽的节点数据校验的

menuMove(data, res) {

        const element = data.draggedContext.element  // 被拖拽的节点对象数据，传入数据的一条item

        const relatedEl = data.relatedContext.element  //  拖拽的相邻节点对象数据，可用于判断，我拖到哪个元素前后了

        const moveType = res.type  //  拖拽方式（dragover/dragenter）

}

5.可能会存在一些拖拽校验，可用：move来限制，但是有时候复杂的业务很难通过拖拽时做校验，这时候我们可以在datadragEnd这个函数里面做校验性的业务区分，直接弹窗报错提示，禁止拖拽。