最近项目中使用到 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 组件的推拽操作的更多相关文章

  1. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  2. antd tree组件文件名换行 + 点击展开时,自动收起同级其他展开目录

    1.在项目中用 antd的tree组件的时候,遇到两个问题 1.文件名太长的话 会超出容器 很难看,解决方法如下 ` 引入css在global下设置 :global { .ant-tree li .a ...

  3. [置顶] Flex中Tree组件无刷新删除节点

    在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...

  4. Antd组件库,利用Menu组件模拟一个简单Tree组件

    当前工作中,前端的主要技术栈用是vue. 那React怎么办呢?总不至于把他扔在墙角吧! 只能在一些很小的项目上,也只有自己一个前端的时候,悄悄的上React. 当然,React项目UI组件还是最喜欢 ...

  5. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  6. Element-ui tree组件自定义节点使用方法

    工作上使用到element-ui tree 组件,主要功能是要实现节点拖拽和置顶,通过自定义内容方法(render-content)渲染树代码如下~   <template> <di ...

  7. Vue iview Tree组件实现文件目录-高级实现

    Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class=&quo ...

  8. 左右推拽显示对比图 - jQyery封装 - 附源文件

    闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <! ...

  9. 【Egret】中tree组件使用案例

    Egret中tree组件使用案例,包含(文本过多时,自动换行功能) 下面代码结合http://bbs.egret.com/forum.php?mod=viewthread&tid=19028& ...

随机推荐

  1. CTF_论剑场_Web20

    直接上脚本,多跑几次就能出flag import requests import re url = "http://123.206.31.85:10020/" s = reques ...

  2. 五、从GitHub浏览Prism示例代码的方式入门WPF下的Prism之MVVM中的EventAggregator

    这一篇我们主要再看完示例12.13后,写了个例子,用于再Modules下执行ApplicationCommands,使用IActiveAware执行当前View的Commands,或者Applicat ...

  3. 『Java』String类使用方法

    Java中的字符串 java.lang.String类表示字符串类,Java程序中所有字符串文字都可以看作实现该类的实例. 特点: 字符串不可变:字符串的值在创建后不能在发生改变 public cla ...

  4. 答应我,安装chromedriver,按照版本号,v70就安装v2.42,

    下载chromedriver,链接:http://chromedriver.storage.googleapis.com/index.html ----------ChromeDriver v2.42 ...

  5. Activity与Service生命周期

    一. Activity 先展示一张Activity的生命周期图: 1.1 Activity状态 只有下面三个状态是静态的,可以存在较长的时间内保持状态不变.(其它状态只是过渡状态,系统快速执行并切换到 ...

  6. 【vulhub】Weblogic CVE-2017-10271漏洞复现&&流量分析

    Weblogic CVE-2017-10271 漏洞复现&&流量分析 Weblogic CVE-2017-10271 XMLDecoder反序列化 1.Weblogic-XMLDeco ...

  7. tomcat下载、安装及配置

    一,下载Tomcat 1.进入官网Http://tomcat.apache.org/,选择download,下载所需要的Tomcat版本. 注意有zip和exe两种格式的 zip(64-bit Win ...

  8. Spring源码解析之ConfigurationClassPostProcessor(二)

    上一个章节,笔者向大家介绍了spring是如何来过滤配置类的,下面我们来看看在过滤出配置类后,spring是如何来解析配置类的.首先过滤出来的配置类会存放在configCandidates列表, 在代 ...

  9. miniFTP项目集合

    项目简介 在Linux环境下用C语言开发的Vsftpd的简化版本,拥有部分Vsftpd功能和相同的FTP协议,系统的主要架构采用多进程模型,每当有一个新的客户连接到达,主进程就会派生出一个ftp服务进 ...

  10. Golang在Linux系统中实现微秒级延迟

    在程序中延迟或者等待一段时间一般可以使用Sleep函数实现,但是因为操作系统线程调度的消耗,往往只能做到十几或者数十毫秒的精度,很难达到微秒级,Golang的time.Sleep也是如此. Sleep ...