产品的需求千奇百怪,在成长中的产品的需求更是。最怕的是到处抄,然后四不像,苦了开发人员了。
话说我们需要一棵树,这个树上有中间节点(文件夹)和叶子节点。然后这些数据会来自两个系统,代表的含义也不相同,就这样优秀没有办法,这都不是事。事情是支持某些文件夹下的节点(包括子中间节点和叶子节点)能拖放到另外一些节点里面,这也不是事,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事件,这样我们其实是不能知道最后的拖放操作的。那么怎么办呢?虽然没

本文介绍如何在Element UI的el-tree组件中实现拖放功能时保留源节点,而不是默认的移动操作。通过调整dragState.dropType并在特定事件中进行判断,实现了既保留源节点又能在目标位置创建副本的需求。
最低0.47元/天 解锁文章
2975





