diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md index 5ecec00d5..aa5435427 100644 --- a/examples/docs/en-US/tree.md +++ b/examples/docs/en-US/tree.md @@ -245,8 +245,12 @@ handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== 'Level two 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === 'Level two 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('Level three 3-1-1') === -1; @@ -1142,8 +1146,12 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== 'Level two 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === 'Level two 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('Level three 3-1-1') === -1; @@ -1178,7 +1186,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. | lazy | whether to lazy load leaf node, used with `load` attribute | boolean | — | false | | draggable | whether enable tree nodes drag and drop | boolean | — | false | | allow-drag | this function will be executed before dragging a node. If `false` is returned, the node can not be dragged | Function(node) | — | — | -| allow-drop | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node | Function(draggingNode, dropNode) | — | — | +| allow-drop | this function will be executed before the dragging node is dropped. If `false` is returned, the dragging node can not be dropped at the target node. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(draggingNode, dropNode, type) | — | — | ### props | Attribute | Description | Type | Accepted Values | Default | diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md index ca41cce29..78c6c2a35 100644 --- a/examples/docs/es/tree.md +++ b/examples/docs/es/tree.md @@ -245,8 +245,12 @@ handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== 'Level two 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === 'Level two 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('Level three 3-1-1') === -1; @@ -1142,8 +1146,12 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== 'Level two 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === 'Level two 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('Level three 3-1-1') === -1; @@ -1177,7 +1185,7 @@ You can drag and drop Tree nodes by adding a `draggable` attribute. | indent | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number | — | 16 | | draggable | si se habilita la función de drag and drop en los nodos | boolean | — | false | | allow-drag | esta función se ejecutará antes de arrastrar un nodo. si devuelve `false`, el nodo no puede ser arrastrado. | Function(nodo) | — | — | -| allow-drop | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. | Function(Nodoquesearrastra, Nododestino) | — | — | +| allow-drop | esta función se ejecutará al arrastrar y soltar un nodo. si devuelve false, el nodo arrastrando no se puede soltar en el nodo destino. `type` has three possible values: 'prev' (inserting the dragging node before the target node), 'inner' (inserting the dragging node to the target node) and 'next' (inserting the dragging node after the target node) | Function(Nodoquesearrastra, Nododestino, type) | — | — | ### props | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md index f255cc16d..572822863 100644 --- a/examples/docs/zh-CN/tree.md +++ b/examples/docs/zh-CN/tree.md @@ -255,8 +255,12 @@ handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== '二级 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === '二级 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('三级 3-1-1') === -1; @@ -1161,8 +1165,12 @@ handleDrop(draggingNode, dropNode, dropType, ev) { console.log('tree drop: ', dropNode.label, dropType); }, - allowDrop(draggingNode, dropNode) { - return dropNode.data.label !== '二级 3-1'; + allowDrop(draggingNode, dropNode, type) { + if (dropNode.data.label === '二级 3-1') { + return type !== 'inner'; + } else { + return true; + } }, allowDrag(draggingNode) { return draggingNode.data.label.indexOf('三级 3-1-1') === -1; @@ -1197,7 +1205,7 @@ | lazy | 是否懒加载子节点，需与 load 方法结合使用 | boolean | — | false | | draggable | 是否开启拖拽节点功能 | boolean | — | false | | allow-drag | 判断节点能否被拖拽 | Function(node) | — | — | -| allow-drop | 拖拽时判定位置能否被放置 | Function(draggingNode, dropNode) | — | — | +| allow-drop | 拖拽时判定目标节点能否被放置。`type` 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后 | Function(draggingNode, dropNode, type) | — | — | ### props | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/packages/tree/src/tree.vue b/packages/tree/src/tree.vue index 215d4d635..0fad5f32c 100644 --- a/packages/tree/src/tree.vue +++ b/packages/tree/src/tree.vue @@ -355,8 +355,14 @@ if (!draggingNode || !dropNode) return; let allowDrop = true; - if (typeof this.allowDrop === 'function' && !this.allowDrop(draggingNode.node, dropNode.node)) { - allowDrop = false; + let dropPrev = true; + let dropInner = true; + let dropNext = true; + if (typeof this.allowDrop === 'function') { + dropPrev = this.allowDrop(draggingNode.node, dropNode.node, 'prev'); + dropInner = this.allowDrop(draggingNode.node, dropNode.node, 'inner'); + dropNext = this.allowDrop(draggingNode.node, dropNode.node, 'next'); + allowDrop = dropInner; } dragState.allowDrop = allowDrop; event.dataTransfer.dropEffect = allowDrop ? 'move' : 'none'; @@ -371,10 +377,6 @@ dragState.dropNode = dropNode; } - let dropPrev = allowDrop; - let dropInner = allowDrop; - let dropNext = allowDrop; - if (dropNode.node.nextSibling === draggingNode.node) { dropNext = false; } diff --git a/types/tree.d.ts b/types/tree.d.ts index 9cd5407e1..dd0e46454 100644 --- a/types/tree.d.ts +++ b/types/tree.d.ts @@ -30,6 +30,26 @@ export interface FilterNodeMethod { (value: string, data: TreeNode, node: any): boolean } +export interface AllowDragMethod { + /** + * Function executed before dragging a node + * + * @param node The node to be dragged + */ + (node: any): boolean +} + +export interface AllowDropMethod { + /** + * Function executed before the dragging node is dropped + * + * @param draggingNode The dragging node + * @param dropNode The target node + * @param type Drop type + */ + (draggingNode: any, dropNode: any, type: string): boolean +} + /** Tree Component */ export declare class ElTree extends ElementUIComponent { /** Tree data */ @@ -83,6 +103,15 @@ export declare class ElTree extends ElementUIComponent { /** Horizontal indentation of nodes in adjacent levels in pixels */ indent: number + /** Whether enable tree nodes drag and drop */ + draggable: boolean + + /** Function to be executed before dragging a node */ + allowDrag: AllowDragMethod + + /** Function to be executed before the dragging node is dropped */ + allowDrop: AllowDropMethod + /** * Filter all tree nodes. Filtered nodes will be hidden *