关于 antd tree 组件的推拽操作
最近项目中使用到 tree 组件的推拽操作, 按常理来说应该主要用到其中的 onDrop 事件,但其中的参数又没有详细的说明,只是在官网给了个例子,网上搜索后又没有发现到位的总结。
因此经过N次的测试,在这里总结下 onDrop 的各参数的意义及使用场景。
先看代码,在官网基础上稍有改动,如下:
const onDrop = (info) => {
const { node, dragNode, dropPosition, dropToGap, event, dragNodesKeys } = info;
// node 代表当前被drop 的对象
// dragNode 代表当前需要drop 的对象
// dropPosition 代表drop后的节点位置;不准确
// dropToGap 代表移动到非最顶级组第一个位置
const dropKey = node.key;
const dragKey = dragNode.key;
const dropPos = node.pos.split('-'); // trueDropPosition: ( -1 | 0 | 1 ) dropPosition计算前的值,可以查看rc-tree源码;
// -1 代表移动到最顶级组的第一个位置
const trueDropPosition = dropPosition - Number(dropPos[dropPos.length - 1]);
const data = [...gData]; loop(data, dragKey, (item, index, arr) => {
arr.splice(index, 1);
});
if (!dropToGap) {
// 移动到非最顶级组第一个位置
loop(data, dropKey, (item) => {
item.children = item.children || [];
// where to insert 示例添加到头部,可以是随意位置
item.children.unshift(dragNode);
});
} else {
// 平级移动、交叉组移动、移动到其他组(非最顶级)非第一个位置 let ar;
let i;
loop(data, dropKey, (item, index, arr) => {
ar = arr;
i = index;
});
if (trueDropPosition === -1) {
// 移动到最顶级第一个位置
ar.splice(i, 0, dragNode);
} else {
// trueDropPosition: 1 | 0
ar.splice(i + 1, 0, dragNode);
}
} };
各参数注明到代码里面,有错误处还请各位道友多指正。
关于 antd tree 组件的推拽操作的更多相关文章
- antd Tree组件中,自定义右键菜单
最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...
- antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录
1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
- Antd组件库,利用Menu组件模拟一个简单Tree组件
当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...
- 【技术博客】使用iview的Tree组件写一棵文件树
本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...
- Element-ui tree组件自定义节点使用方法
工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~ <template> <di ...
- Vue iview Tree组件实现文件目录-高级实现
Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...
- 左右推拽显示对比图 - jQyery封装 - 附源文件
闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <! ...
- 【Egret】中tree组件使用案例
Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...
随机推荐
- 最短路径问题 Dijkstra ——Python实现
# 最短路径算法 Dijkstra # 输入:含权有向图 G=(V,E),V={1,2,3...n} # 输出:G中顶点 1 到各个顶点地最短距离 Dijkstra算法各点权值变化情况: 1 ...
- 开源基于docker的任务调度器pipeline,比`quartzs` 更强大的分布式任务调度器
pipeline 分布式任务调度器 目标: 基于docker的布式任务调度器, 比quartzs,xxl-job 更强大的分布式任务调度器. 可以将要执行的任务打包为docker镜像,或者选择已有镜像 ...
- Axure RP 9 Enterprise/Pro/Team for Mac/Windows安装破解版激活教程
Axure RP 9.0 是一款功能强大的.操作方便.专业可靠的快速原型设计工具.一款能够在这里体验最简单的设计方式,这里有着全新的升级的软件界面,更加的时尚,更加的丰富,专为每一个用户提供了便捷的设 ...
- Mysql数据库基础知识(全)
前言:本博文为个人笔记,记录了Mysql的一些基本操作,一般掌握本博文就可以了解数据库.表.数据项的增删改查,希望对大家的学习有所帮助. 首先下载PHPSTUDY,将Mysql配置为系统变量. 具体操 ...
- 五、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之MVVM中的EventAggregator
这一篇我们主要再看完示例12.13后,写了个例子,用于再Modules下执行ApplicationCommands,使用IActiveAware执行当前View的Commands,或者Applicat ...
- 2020互联网寒冬之下,作为一个Android老码农,是如何进入腾讯的?
由于众所周知的原因,原生Android开发如今已经日渐凋敝,作为一个Android程序员,不仅要会Java,Kotlin,JavaScript,Css,Html,还要会Flutter,C++,FFmp ...
- .jsp文件的使用和理解以及一些小练习和Listener监听器
什么是 jsp,它有什么用? jsp 的全换是 java server pages.Java 的服务器页面.jsp 的主要作用是代替 Servlet 程序回传 html 页面的数据.因为 Servle ...
- 解决SecureCRT中删除会话后无法重建问题
SecureCRT和SecureFX中创建一个会话(例如名为"10.0.2.47")后,如果删除这个会话,然后再创建一个同样名字的会话,就会报错,原因是SecureCRT在C盘上创 ...
- 【笔记】numpy.array的常用基本运算以及对数据的操作
numpy.array的基本运算以及对数据的操作 设置一个问题,例如 这种只需要基本的运算就可以实现 类似的 numpy对向量的运算进行了优化,速度是相当快的,这种被称为universal funct ...
- 【笔记】衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square
衡量线性回归法的指标 MSE,RMS,MAE以及评价回归算法 R Square 衡量线性回归法的指标 对于分类问题来说,我们将原始数据分成了训练数据集和测试数据集两部分,我们使用训练数据集得到模型以后 ...