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

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 |

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 |

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

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

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
    *