Element: [Feature Request] tree's node-drag-end event, increase the cancellation function, and the drag and drop can be canceled after judgment

Created on 12 Apr 2018  ·  8Comments  ·  Source: ElemeFE/element

Existing Component

Component Name

Tree

Description

tree 的 node-drag-end 事件 ,增加取消功能,,判断后可已取消此次拖拽
现有的allowDrop 不能满足适用需求,比如一层二次不能加节点,但是二层可以加子节点(三层)
一层的allowDrop 设为false, 二层的 allowDrop 设为true, 但是可以通过 二层的 before,after 来增加二层,相当于一层的inner

tree

Most helpful comment

或者增加 allow-before-drop 、 allow-after-drop 与 allow-inner-drop 三种属性

All 8 comments

Translation of this issue:

Existing Component

yes

Component Name

Tree

Description

Tree's node-drag-end event, increase the cancellation function, and the drag and drop can be canceled after judgment

The existing allowDrop can not meet the applicable requirements, such as the one layer two times can not add nodes, but the two layer can add subnodes (three layers).
A layer of allowDrop is set to false, the two layer of allowDrop is set to true, but it can be increased by two layers through two layers of before and after, which is equivalent to a layer of inner.

描述再清楚一点,按以下格式,最好写个例子。现有描述我看不出来哪些是你需要的,哪些是你认为 allow-drop 做不到的:

  • 你的需求具体是?

  • 如果使用 allow-drop,无法处理的情况是?

需求:

  • 做一个可拖拽调整的菜单
  • 一级 根节点只有一个,不允许拖动,也不允许被放置,
  • 二级是子系统,不允许添加,不允许拖动(顺序不能调整),但是可以被放置 (三级及以下可以随意调整,并放置到任意的二级及以下菜单里面)

现在的情况:

  • 一级菜单 allow-drag 与 allow-drop 设置为 false,结果:一级菜单不能拖动,不能被放置子节点(二级)
  • 二级菜单 allow-drag 设为false, 结果:不允许拖动(顺序不能调整)
  • 二级菜单 allow-drop 设为true ,结果:可以给里面放置三级菜单
  • 结合以上情况,由于 allow-drop 可以接收 before,after,inner 三种情况的放置, 如果仅仅接收inner ,满足情况,但是接收了 before,after 当对于给一级增加了子节点,所以不满足需求

或者增加 allow-before-drop 、 allow-after-drop 与 allow-inner-drop 三种属性

?我描述的清空明白吗?

明白了,等我们后续跟进。

10792 给 allow-drop 添加了第三个参数,代表当前节点是放置在目标节点之前、之内还是之后。

具体到你的场景,为了达到一级不能增加子节点的目的,可以:

allowDrop(draggingNode, dropNode, type) {
  if (dropNode.parent.data.label === '一级') { // 如果目标节点是二级节点
    return type === 'inner'; // 则只允许插入至目标节点内部
  }
  // 其他逻辑
}

drop之前会出现一个弹窗让用户选择是否确定,确定了再把节点drop下去,否则就不drop~~~~ 按照现有的api怎么实现?

Was this page helpful?
0 / 5 - 0 ratings