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

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

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

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

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

  1. 只支持inner类型的拖放,如果不知道我在说什么,说明你没来对地方,inner是el-tree支持的三种拖放类型之一,它们是inner、prev、next,意思对,关键字对不对我也不想再去查了,文档上有
  2. 节点是懒加载,即设置了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事件,这样我们其实是不能知道最后的拖放操作的。那么怎么办呢?虽然没

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值