美文网首页
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