使用el-tree支持保留源节点的拖放操作

产品的需求千奇百怪，在成长中的产品的需求更是。最怕的是到处抄，然后四不像，苦了开发人员了。

话说我们需要一棵树，这个树上有中间节点（文件夹）和叶子节点。然后这些数据会来自两个系统，代表的含义也不相同，就这样优秀没有办法，这都不是事。事情是支持某些文件夹下的节点（包括子中间节点和叶子节点）能拖放到另外一些节点里面，这也不是事，el-tree能支持。可怕的就是，一些拖放是删除源节点的操作，就像移动操作；另一些拖放是保留源节点的操作，就像在目标节点下创建了副本，哈哈，就是这么有意思:(

删除源的移动是el-tree本来就支持的，我们今天要说的是保留源的拖放。其实我这里能在不修改element-ui源码的情况下实现这个功能真的说算是限制了一些事情，如果跟我的需求不一样的，这种方法还是不能用的，一句话就是场景不符合。我的一些假定：

只支持inner类型的拖放，如果不知道我在说什么，说明你没来对地方，inner是el-tree支持的三种拖放类型之一，它们是inner、prev、next，意思对，关键字对不对我也不想再去查了，文档上有
节点是懒加载，即设置了lazy

我的实现方案是，在需要保留源节点的情况下，在node-drag-over事件里面把el-tree实例中的dragState.dropType改成’none’，因为我发现在drop事件里面，会根据dropType来做相应的操作，如果是none，则不会把源节点删除，也不会把源节点插入目标节点。none这个类型是为了处理上面三种类型之外的操作做的，其实就是不做任何的拖放操作，我在实际中模拟出了这种场景，就是把元素拖出去走一圈，然后再回到原位置。

...
handleNodeDragOver(draggingNode, dropNode, type) {... // 判断是否要保留源节点，然后才执行下面的语句this.$refs.tree.dragState.dropType = 'none';
}
...

如果dropType是node的话，不会触发node-drop事件，这样我们其实是不能知道最后的拖放操作的。那么怎么办呢？虽然没有node-drop事件，但是它会触发node-drag-end事件，只能把逻辑写在这里了，不过要判断是否是需要保留源节点的情况，然后才去做事情。

handleNodeDragEnd(draggingNode, dropNode, type) {... // 判断是否需要保留源节点// 巴拉巴拉}

也就是说drop-node和一部分node-drap-end我都认为是最终的操作了。这里我会调用接口告知后端需要移动节点了，后端会把数据落库，然后我需要在接口返回后重新加载目标节点，其实我并没有都重新加载，我是判断如果目标节点已经展开了才去加载，否则还让它保持collapse状态，也就是啥也不动。

好了实现思路也就是这样，现在为止基本满足了需求，项目还在开发中，后面如果遇到了问题，我会再进行更新的。我还要再说一下，我这里的处理方式并不一定能适用别人的场景，只是一个借鉴、思想。如果跟我的情况不行，估计要另想办法了，或自己开发或重写一些element-tree的源码，方法总比困难多不是吗？

于2021-06-22
最终我还是没能把这个方法走完，退化到了一个简单的方案，就是在拖拽后，重新刷新源节点的目标节点，这样因为数据库中数据还在，因此还是会出现的。那么怎么刷新父节点呢？

node.loaded = false;
node.epxand();

如果你发现node拿不到，那么真是一个遗憾的事情。在el-tree的node-drop事件处理函数中，参数分别是: draggingNode, dropNode, type, event，分别是拖拽的节点对象、拖放的节点对象、类型和事件对象。在这里draggingNode的parent属性我们拿不到。换一个思路，在node-drag-start事件时记录一下父节点，那个时候parent字段还不是空！

如果不小心帮助到了你，请帮忙点赞哦:)

使用el-tree支持保留源节点的拖放操作相关推荐

cors数据类型_如何根据RTK的差分格式选择千寻cors账号的源节点进行设置？
千寻cors账号的设置中源节点是根据使用的品牌RTK是为双星仪器还是三星仪器选择,但问题就在于我们看到的RTK的技术参数中一般很少见到标注仪器的卫星系统,更多的是差分格式.其实千寻cors账号的源节点 ...
element-ui tree 点击章节节点勾选/取消勾选
element-ui tree 点击章节节点勾选/取消勾选遇到一个需求,要求点击tree组件的章节时(不是点击checkBox),要进行节点勾选/取消勾选操作: 原本想的方案非常复杂,涉及到遍历父子 ...
LeetCode 589. N-ary Tree Preorder Traversal-多子节点树前序遍历--递归，迭代--反向压栈--C++解法
LeetCode 589. N-ary Tree Preorder Traversal-多子节点树前序遍历–递归,迭代–反向压栈–C++解法 LeetCode题解专栏:LeetCode题解 LeetC ...
LINQ to Entities 不支持 LINQ 表达式节点类型“ArrayIndex”
我就不屁话,能一张图就解决的就不说话了 2015-03-28 14:53:24,440 [10] ERROR log - System.NotSupportedException: LINQ to E ...
跨进程实现在Tree中快速定位节点
跨进程实现在Tree中快速定位节点 -------------------------------------------------------------------------------- ...
Java 通用代码生成器光 2.3.0 文明 Beta10 版发布介绍视频，支持从源码构建
Java 通用代码生成器光 2.3.0 文明 Beta10 版发布介绍视频,支持从源码构建 Java 通用代码生成器光 2.3.0 文明 Beta10 版发布最新介绍视频,详细介绍 java 通用代码 ...
Java 通用代码生成器光 2.3.0 文明 Beta10 版，支持从源码构建
Java 通用代码生成器光 2.3.0 文明 Beta10 版,支持从源码构建 Java 通用代码生成器光 2.3.0 文明已发布 Beta10 版,支持从源码构建代码生成器.您可以装好 JDK 和 ...
Element-UI实现Tree 树形控件节点添加图标
Element-UI实现Tree 树形控件节点添加图标: 属于自定义节点内容,可以通过两种方法进行树节点内容的自定义:render-content 和 scoped slot. 1.scoped s ...
雪花算法(snowflake)容器化部署支持动态增加节点
先简单的介绍一下雪花算法,雪花算法生成的Id由:1bit 不用 + 41bit时间戳+10bit工作机器id+12bit序列号,如下图: 不用:1bit,因为最高位是符号位,0表示正,1表示负,所以这 ...

使用el-tree支持保留源节点的拖放操作

使用el-tree支持保留源节点的拖放操作相关推荐

最新文章

热门文章