自研Vue3开源Tree组件:节点拖拽bug修复

news2024/9/9 0:09:07

dropTypeafter,且dropNode为父节点时,bug出现了:

在这里插入图片描述

bug原因:插入扁平化列表的位置insertIndex计算的不对:

在这里插入图片描述

正确的逻辑,同inner要算上子孙节点所占的位置:

在这里插入图片描述

bug修复!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1958177.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue里给img的src绑定数据失效

起因 在v-for遍历数据时想要通过给img的src单向绑定 图片路径时出现问题 解决过程 上网查说是webpack构建时识别不到,直接不单绑数据,写死试试看 解决方案 直接require导入图像文件模块

【C语言】VS的实用调试技巧

0. 前言 VS(Visual Studio)是集成开发环境,其内置了多种调试工具和技巧帮助开发人员在开发过程中解决问题。包含断点、监视窗口、自动窗口、调用堆栈等,通过这些技巧,开发人员可以有效地调试和解决程序中的问题。我们在VS编译器上写代码&…

yolov10在地平线旭日X3派上的部署和测试(Python版本和C++版本)

0、搭建开发环境 当前的测试根据一下的步骤并修改源码是可以实现yolov8的板端运行,如果不想再搭建环境和测试代码bug上浪费更多的时间可以直接获取本人的测试虚拟机,所有的测试代码、虚拟环境和板端测试工程以全部打包到了虚拟机,需要的可以…

微前端概念

微前端作用 大型应用程序的拆分独立的前端子应用降低程序复杂性&#xff0c;提高开发效率 微前端能力 js隔离css隔离元素隔离生命周期预加载数据通信应用跳转多层嵌套… 微前端实现方案 IframeSingle-spaQiankunMicro-app Iframe <iframe src"https://www.examp…

【优秀python web设计】基于Python flask的猫眼电影可视化系统,可视化用echart,前端Layui,数据库用MySQL,包括爬虫

1 绪论 1.1 设计背景及目的 猫眼电影作为国内知名的电影信息网站&#xff0c;拥有海量的电影信息、票房数据和用户评价数据。这些数据对于电影市场的研究和分析具有重要意义。然而&#xff0c;由于数据的复杂性和数据来源的多样性&#xff0c;如何有效地采集、存储和展示这些数…

巴黎OSGB倾斜摄影数据详细介绍

北京时间7月27日&#xff0c;第33届夏季奥林匹克运动会开幕式在法国巴黎举行&#xff0c;巴黎成为继伦敦后&#xff0c;第二个三度举办夏季奥运会的城市&#xff0c;此次为法国相隔100年后再次举办夏季奥运会&#xff0c;前两次分别在1900年及1924年。开幕式上&#xff0c;巴黎…

Shader入门精要总结(二)矩阵

1. 矩阵乘法 一个rn的矩阵A和一个nc的矩阵B相乘&#xff0c;它们的结果AB将会是一个rc大小的矩阵&#xff0c;不满足此规则不能相乘 矩阵乘法满足一些性质 矩阵乘法不满足交换律 即AB≠BA矩阵乘法满足结合律 (AB)CA(BC) 2. 特殊矩阵 方块矩阵 指行和列数目相等的矩阵&#…

【WEB安全】 PHP基础文件知识完整教学中(超详细)

文章目录​​​​​​​ 1.PHP 文件处理 PHP 操作文件 PHP 文件打开/读取/关闭 ​​​​​​​文件的 复制 删除 重名 ​​​​​​​文件的判断 2.PHP获取文件属性 3.PHP目录操作 4.命名空间 PHP 命名空间可以解决以下两类问题&#xff1a; 5.正则表达式 正则表达…

网站后端管理和构建java项目的工具-Maven

maven是用于管理和构建java项目的工具。 管理Jar包 无论是使用eclipse、IDEA创建的maven项目&#xff0c;格式都是统一的。 不同开发工具创建的maven项目兼容。 test是对main测试的代码。main中的resources中放置配置文件。 对于Maven&#xff0c;一个Maven项目就是一个对象…

《基于深度学习的目标检测算法综述论文的解读》

论文阅读&#xff1a;《基于深度学习的目标检测算法综述论文的综述》的总结 作者 &#xff1a; 包晓敏&#xff0c;王思琪 ( 浙江理工大学 信息学院&#xff0c;浙江 杭州 310018) 本文章介绍了两阶段深度学习算法和单阶段深度学习算法。 一、目标检测的定义&#xff1a; 目…

Qt Designer,仿作一个ui界面的练习(二):部件内容的填充

有了完成了布局的基本框架设计之后&#xff0c;对各个部件逐步完成内容的填充。 一、还是从顶边栏开始&#xff1a; 1、在顶边栏的topLogo里面拖入一个QLabel&#xff08;标签&#xff09;&#xff0c;命名为logoImage&#xff0c;删除标签的文字。 2、右键点击topLogo&#x…

[Linux安全运维] LAMP 环境搭建保姆级教学(Apache + MySQL + PHP) ~~

LAMP LAMP 是一种网站技术&#xff0c;可以实现动态的网站页面部署。 1. LAMP概述 1 .1构成 Linux: 简介: Linux 是一种开源的操作系统&#xff0c;以其稳定性和安全性而著称。在 LAMP 堆栈中&#xff0c;它作为服务器操作系统运行。作用: 为应用程序提供一个稳定、安全的运…

为了方便写CURD代码,我在UTools写了个插件SqlConvert来生成代码!

-1. 前言 为了方便摸鱼&#xff0c;我之前写过一个通过sql生成代码的工具&#xff0c;但是服务器到期了&#xff0c;也就懒得重新部署了。 技术框架是 SpringBoot MybatisPlus Velocity Vue ElementUI Sql-ParseeSql-Parser-ui 0. Utools应用安装 官网地址: https://u.too…

达梦数据库归档介绍

一、什么是归档 数据库归档是一种数据管理策略&#xff0c;它涉及将旧的、不经常访问的数据移动到一个单独的存储设备&#xff0c;以便在需要时可以检索&#xff0c;同时保持数据库的性能和效率。 归档的主要目标是为了释放数据库中的空间&#xff0c;以便更有效地利用高性能…

如何用PostMan按照规律进行循环访问接口

①设置动态变量 步骤一: 设置环境变量 1. 创建环境变量集合 在 Postman 左上角选择 "环境"&#xff0c;然后点击 "添加" 来创建一个新的环境变量集合。给它起一个名称&#xff0c;比如 "uploadDemo". 2. 添加初始变量 在新创建的环境变量集…

校车购票小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;我的乘车信息管理&#xff0c;车辆信息管理&#xff0c;座位管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;车辆信息&#xff0c;我的 开发系统…

electron 主进程和渲染进程

最近在整理electron 相关的项目问题&#xff0c;对自己来说也是温故知新&#xff0c;也希望能对小伙伴们有所帮助&#xff0c;大家共同努力共同进步。加油&#xff01;&#xff01;&#xff01;&#xff01; 虽然最近一年前端大环境不好&#xff0c;但是大家还是要加油鸭&#…

kafka leader选举过程浅析

文章目录 概要核心概念leader选举具体流程小结 概要 kafka我们都知道它是通过副本机制&#xff0c;来支持负载均衡和故障转移等高可用的&#xff0c;那么具体副本的选举过程你了解吗&#xff1f;下面我们一起来学习下吧&#xff01; 核心概念 Controller定义&#xff1a;是特…

Cocos Creator2D游戏开发(7)-飞机大战(5)-让子弹飞

飞机大战(5)-碰撞及积分 参考敌机的生成 子弹由飞机生成,放在player_node节点子弹重复使用,要使用预制体;子弹新增了动画 ①创建一个预制体 命名为playerBullet_prefab ② 双击预制体将bullet1图片拖入预制体 保存,关闭(场景编辑器里面的) ③ 发射子弹 player加入代码 prop…

尚庭公寓(五)

图片上传管理 由于公寓、房间等实体均包含图片信息&#xff0c;所以在新增或修改公寓、房间信息时&#xff0c;需要上传图片&#xff0c;因此我们需要实现一个上传图片的接口。 **1. 图片上传流程** 下图展示了新增房间或公寓时&#xff0c;上传图片的流程。 可以看出图片上传…