ElementUI tree 节点拖拽

<el-tree
    :data="rootNodeData"
    class="catalogTree"
    ref="catalogTree"
    highlight-current
    node-key="id"
    :props="{ label: 'label', children: 'children', isLeaf : 'isLeaf' }"
    :expand-on-click-node="false"
    @node-click="treeNodeClick"

    lazy
    :load="treeLoadNode"

    draggable
    :allow-drag="allowDrag"
    :allow-drop="allowDrop"

    @node-drag-start="handleDragStart"
    @node-drag-over="handleDragOver"
    @node-drag-end="handleDragEnd"

    @node-drop="handleDrop">
</el-tree>
/**
 * 判断节点能否被拖拽
 * @param draggingNode 被拖拽节点对应的 Node
 */
allowDrag(draggingNode){
    let flag = false;
    this.$emit('allowDrag', draggingNode, val => {
        flag = val;
    });
    return flag;
},
/**
 * 拖拽时判定目标节点能否被放置
 * @param draggingNode 被拖拽节点对应的 Node
 * @param dropNode 目标节点对应的 Node
 * @param type 被拖拽的节点放置在目标节点的位置:('prev'、'inner' 和 'next')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
 */
allowDrop(draggingNode, dropNode, dropType){
    let flag = false;
    this.$emit('allowDrop', draggingNode, dropNode, dropType, val => {
        flag = val;
    });
    return flag;
},
/**
 * 节点开始拖拽时触发的事件
 * @param node 被拖拽节点对应的 Node
 * @param event event 对象
 */
handleDragStart(draggingNode, event){
    this.$emit('handleDragStart', draggingNode, event);
},
/**
 * 在拖拽节点时触发的事件(类似浏览器的 mouseover 事件)
 * @param draggingNode 被拖拽节点对应的 Node
 * @param dropNode 目标节点对应的 Node
 * @param event event 对象
 */
handleDragOver(draggingNode, dropNode, event){
    this.$emit('handleDragOver', draggingNode, dropNode, event);
},
/**
 * 拖拽结束时(可能未成功)触发的事件
 * @param draggingNode 被拖拽节点对应的 Node
 * @param dropNode 目标节点对应的 Node
 * @param dropType 被拖拽的节点放置在目标节点的位置:('before'、'inner' 和 'after')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
 * @param event event 对象
 */
handleDragEnd(draggingNode, dropNode, dropType, event){
    this.$emit('handleDragEnd', draggingNode, dropNode, dropType, event);
},
/**
 * 拖拽成功完成时触发的事件
 * @param draggingNode 被拖拽节点对应的 Node
 * @param dropNode 目标节点对应的 Node
 * @param dropType 被拖拽的节点放置在目标节点的位置:('before'、'inner' 和 'after')分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
 * @param event event 对象
 */
handleDrop(draggingNode, dropNode, dropType, event){
    this.$emit('nodeDrop', draggingNode, dropNode, dropType, event);
},

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值