github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tree: add type as allow-drop's 3rd param (#10792)

pull/10801/head
杨奕 2018-04-19 19:25:59 +08:00 committed by GitHub
parent 0c475a98c0
commit e8e2fc425b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 76 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
examples/docs/en-US/tree.md
View File

@ -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 |

18
examples/docs/es/tree.md
View File

@ -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 |

18
examples/docs/zh-CN/tree.md
View File

@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

14
packages/tree/src/tree.vue
View File

@ -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;
}

29
types/tree.d.ts vendored
View File

@ -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
*