当前位置: 首页 > article >正文

el-tree拖拽事件,限制同级拖拽,获取拖拽后节点的前后节点,同级拖拽合并父节点name且子节点加入目标节点里

在这里插入图片描述

node-drag-start:开始拖拽节点时触发​​(按下鼠标按钮),无论是否允许放置,此事件都会触发。

allow-drop 返回 true 才能触发@node-drag-end="handleDragend"、@node-drop="handleDrop"
(1)allow-drop:动态控制​​是否允许放置;
(2)node-drag-end:拖拽结束时(可能未成功)触发的事件;
(3)node-drop:拖拽成功完成时触发的事件,触发处理数据更新;
node-drag-end与node-drop无法通过返回值阻止拖拽操作

// ❌ 错误:此时数据尚未更新!
handleDragEnd() {this.treeData = newData; // ❌ 不会生效
}// ✅ 正确:在 @node-drop 中更新数据
handleDrop() {this.treeData = newData; // ✅ 触发响应式更新
}

在这里插入图片描述

<template><!-- 两棵el-tree的节点跨树拖拽实现 --><div class="tree-drag"><!-- 左侧树(可拖出) --><el-tree:data="treeData1"ref="tree1"class="tree" node-key="id"draggabledefault-expand-all:props="defaultProps"@node-drop="handleDrop":allow-drop="returnTrue"></el-tree><!-- 右侧树(可拖入) --><el-tree:data="treeData2" ref="tree2"class="tree" node-key="id"draggabledefault-expand-all:allow-drop
http://www.lryc.cn/news/2396122.html

相关文章:

  • day62—DFS—太平洋大西洋水流问题(LeetCode-417)
  • 《Python基础》第2期:环境搭建
  • WSL 安装 Debian 12 后,Linux 如何安装 curl , quickjs ?
  • [CSS3]vw/vh移动适配
  • Python进阶与常用库:探索高效编程的奥秘
  • nt!MiDispatchFault函数分析之nt!MiCompleteProtoPteFault函数的作用
  • YOLOX 的动态标签分类(如 SimOTA)与 Anchor-free 机制解析2025.5.29
  • 打卡day42
  • 小白的进阶之路系列之八----人工智能从初步到精通pytorch综合运用的讲解第一部分
  • 724.寻找数组的中心下标前缀和
  • 软考-系统架构设计师-第十六章 层次式架构设计理论与实践
  • 甘特图 dhtmlxGantt.js UA实例
  • Docker学习笔记:基础知识
  • 5.2 初识Spark Streaming
  • uv:一个现代化的 Python 依赖管理工具
  • Python趣学篇:交互式词云生成器(jieba + Tkinter + WordCloud等)
  • 理解解释器架构:原理、组成与运行机制全解析
  • 2025华为OD机试真题+全流程解析+备考攻略+经验分享+Java/python/JavaScript/C++/C/GO六种语言最佳实现
  • Python应用for循环临时变量作用域
  • 设计模式——桥接设计模式(结构型)
  • LLaDa——基于 Diffusion 的大语言模型 打平 LLama 3
  • Apache SeaTunnel部署技术详解:模式选择、技巧与最佳实践
  • 2. 数据结构基本概念 (2)
  • 鸿蒙5.0+ 多协议设备发现与分布式软总线技术实践
  • STM32F407寄存器操作(多通道单ADC+DMA)
  • 基于React和TypeScript的金融市场模拟器开发与模式分析
  • 剑指offer13_剪绳子
  • reverse_ssh 建立反向 SSH 连接指南 混淆AV [好东西哟]
  • vue+elementUi+axios实现分页(MyBatis、Servlet)
  • WebBuilder数据库:企业数据管理的能力引擎