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

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.xdnf.cn/news/9217.html

相关文章:

  • 让 Deepseek 写一个尺码计算器
  • LLM 驱动的 Go 到 Rust 项目迁移的挑战与实践
  • PHP生成pdf方法
  • AJAX 数据库
  • 第四十五篇-Tesla P40+Qwen3-30B-A3B部署与测试
  • Linux Shell 切换
  • Transformer 通关秘籍10:词向量运算:queen=king-man+wowem
  • 2025年5月6日 飞猪Java一面
  • 2025 年江西研究生数学建模竞赛题C题基于大雾背景视频学习的能见度回归建模完整思路 模型代码 结果 成品分享
  • 为(FramePack)的视频生成添加首尾帧功能
  • OpenGL Chan视频学习-11 Uniforms in OpenGL
  • 【洛谷P9303题解】AC- [CCC 2023 J5] CCC Word Hunt
  • 功耗仅4W!迷你服务器黑豹X2(Panther X2)卡刷、线刷刷入Armbian(ubuntu)系统教程
  • 鸿蒙OSUniApp 制作美观的文章列表展示组件#三方框架 #Uniapp
  • 11.12 LangGraph全局共享状态实战:200ms实现50+仓库AI协同,效率飙升!
  • vscode的Embedded IDE创建keil项目找不到源函数或者无法跳转
  • windows中Redis、MySQL 和 Elasticsearch启动并正确监听指定端口
  • 亚马逊服务器磁盘扩容一般操作
  • 基于springboot的校园商铺管理系统的设计与实现
  • 大型三甲医院更换HIS系统全流程分析与经验考察(下)
  • 【React】-组件中实现高性能鼠标跟随提示框的完整优化过程
  • AI赋能引爆短剧全球化风潮,腾讯云媒体处理助力短剧平台出海吸金
  • 中国免税品人工智能商城:引领免税品市场新潮流
  • transformer总结
  • 华为OD机试真题——斗地主之顺子(2025B卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
  • QAtomicInt原子变量的CAS(Compare And Swap)写法与优缺点
  • 通信算法之279:数据链/自组网通信设备--MIMO(2T2R)-OFDM系统系列--实际工程应用算法代码--2.OFDM参数设计及帧结构设计
  • 批量无人值守装机(使用cobbler批量安装windows)
  • 用提示词写程序(2),VSCODE+Claude3.5开发edge扩展插件
  • SuperMap GIS基础产品FAQ集锦(20250519)