关于 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& ...
随机推荐
- 自学linux——10.Linux的网络知识
linux的网络知识 一.网络相关概述 1.网络的分类 局域网(LAN):在几百米到十几公里内办公楼群或校园内的计算机相互连接所构成的计算机网络 城域网(MAN):覆盖相距不远的几栋办公楼,也可以覆盖 ...
- 自学linux——6.安全外壳协议(ssh服务)
ssh服务 ssh(secure shell)安全外壳协议:远程连接协议,远程文件传输协议 1.协议使用端口号默认:22 若要修改,则修改ssh服务的配置文件/etc/ssh/ssh_config a ...
- 庆FastGithub加入.NET Core Community
.NET Core Community .NET Core Community是一个基于并围绕着 .NET 技术栈展开组织和活动的非官方.非盈利性的民间开源社区,提供了很多优秀的 .NET 开源项目. ...
- RSA算法之学习
一.RSA算法 RSA是非对称加密算法中的代表,它的重要性不言而喻,为了弄清楚RSA算法,我们一起来完成一项任务: 背景:现在是疫情时代,假如小明和女朋友被迫在两个城市,小明为了表达感情,想发给对方一 ...
- Cookie和Session得使用理解
Cookie 饼干 什么是Cokkie? 1.Cookie 翻译过来是饼干的意思. 2.Cookie 是服务器通知客户端保存键值对的一种技术. 3.客户端有了 Cookie 后,每次请求都发送给服务器 ...
- IDEA Error:java: 无效的源发行版: 11错误
IDEA Error:java: 无效的源发行版: 11错误 今天在网上下载了一个项目到本地运行报错 Error: Java : 无效的源发行版: 11 ,上网查了很多找到问题所在.项目的 JDK(P ...
- 刚学spark
https://blog.csdn.net/u013019431/article/details/80776662 在jupyter notebook import pysparkhttps:// ...
- Android 9.0 BufferSlot注解
源码位置 /frameworks/native/libs/gui/include/gui/BufferSlot.h 源码 struct BufferSlot { BufferSlot() : mGra ...
- Longhorn 企业级云原生容器存储解决方案-部署篇
内容来源于官方 Longhorn 1.1.2 英文技术手册. 系列 Longhorn 是什么? Longhorn 云原生分布式块存储解决方案设计架构和概念 安装 Longhorn 可以通过多种方式安装 ...
- 通过Mssql提权的几种姿势
本文记录针对SQL Server数据库,在拿到shell之后进行提权的5种方法. 一. xp_cmdshell提权 上面的数据库连接需要知道sa的密码,连接之后,在下面的sql命令处执行: exec ...