美文网首页
vuedraggable使用

vuedraggable使用

作者: 有一个程序媛 | 来源:发表于2021-01-14 10:16 被阅读0次

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这个函数里面做校验性的业务区分,直接弹窗报错提示,禁止拖拽。

相关文章

网友评论

      本文标题:vuedraggable使用

      本文链接:https://www.haomeiwen.com/subject/wmgmaktx.html