美文网首页
ElementUI tree 节点拖拽

ElementUI tree 节点拖拽

作者: Cherry丶小丸子 | 来源:发表于2023-03-21 09:54 被阅读0次
<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);
},

相关文章

网友评论

      本文标题:ElementUI tree 节点拖拽

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