Tree: update drag and drop logic (ElemeFE#10372)

lijing666 · Mar 28, 2018 · 4fe58a3 · 4fe58a3
1 parent 438348c
commit 4fe58a3
Show file tree

Hide file tree

Showing 9 changed files with 505 additions and 161 deletions.
diff --git a/examples/docs/en-US/tree.md b/examples/docs/en-US/tree.md
@@ -996,6 +996,103 @@ Only one node among the same level can be expanded at one time.
 ```
 :::
 
+### Draggable
+
+Tree nodes can be drag and drop.
+
+:::demo
+```html
+<el-tree
+  :data="data6"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data6: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode) {
+        return dropNode.data.label !== 'Level two 3-1';
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Attributes
 | Attribute             | Description                              | Type                        | Accepted Values | Default |
 | --------------------- | ---------------------------------------- | --------------------------- | --------------- | ------- |
@@ -1018,6 +1115,9 @@ Only one node among the same level can be expanded at one time.
 | accordion             | whether only one node among the same level can be expanded at one time | boolean                     | —               | false   |
 | indent                | horizontal indentation of nodes in adjacent levels in pixels | number                     | —    | 16 |
 | 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 return `false`, the node can not be drag.  | Function(node)  | —  | —  |
+| allow-drop            | this function will be executed when dragging enter a node. if return `false`, dragging node can not be drop at the node. | Function(draggingNode, dropNode)  | —    | —     |
 
 ### props
 | Attribute | Description                              | Type   | Accepted Values | Default |
@@ -1060,6 +1160,12 @@ Only one node among the same level can be expanded at one time.
 | current-change | triggers when current node changes       | two parameters: node object corresponding to the current node, `node` property of TreeNode |
 | node-expand    | triggers when current node open          | three parameters: node object corresponding to the node opened, `node` property of TreeNode, TreeNode itself |
 | node-collapse  | triggers when current node close         | three parameters: node object corresponding to the node closed, `node` property of TreeNode, TreeNode itself |
+| node-drag-start | triggers when dragging start   | two parameters: node object corresponding to the dragging node、event. |
+| node-drag-enter | triggers when dragging node enters a node  | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging enter node、event. |
+| node-drag-leave | triggers when dragging node leaves a node  | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging leave node、event.  |
+| node-drag-over | triggers when dragging over a node（like browser mouseover event） | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging over node、event.  |
+| node-drag-end  | triggers when dragging end  | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
+| node-drop  | triggers after dragging and dropping onto a node  | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
 
 ### Scoped slot
 | name | Description |

diff --git a/examples/docs/es/tree.md b/examples/docs/es/tree.md
@@ -996,6 +996,103 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
 ```
 :::
 
+### Draggable
+
+Tree nodes can be drag and drop.
+
+:::demo
+```html
+<el-tree
+  :data="data6"
+  node-key="id"
+  default-expand-all
+  @node-drag-start="handleDragStart"
+  @node-drag-enter="handleDragEnter"
+  @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
+  @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
+  draggable
+  :allow-drop="allowDrop"
+  :allow-drag="allowDrag">
+</el-tree>
+
+<script>
+  export default {
+    data() {
+      return {
+        data6: [{
+          label: 'Level one 1',
+          children: [{
+            label: 'Level two 1-1',
+            children: [{
+              label: 'Level three 1-1-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 2',
+          children: [{
+            label: 'Level two 2-1',
+            children: [{
+              label: 'Level three 2-1-1'
+            }]
+          }, {
+            label: 'Level two 2-2',
+            children: [{
+              label: 'Level three 2-2-1'
+            }]
+          }]
+        }, {
+          label: 'Level one 3',
+          children: [{
+            label: 'Level two 3-1',
+            children: [{
+              label: 'Level three 3-1-1'
+            }]
+          }, {
+            label: 'Level two 3-2',
+            children: [{
+              label: 'Level three 3-2-1'
+            }]
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        }
+      };
+    },
+    methods: {
+      handleDragStart(node, ev) {
+        console.log('drag start', node);
+      },
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
+      },
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
+      },
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
+      },
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode.label, dropType);
+      },
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode) {
+        return dropNode.data.label !== 'Level two 3-1';
+      },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('Level three 3-1-1') === -1;
+      }
+    }
+  };
+</script>
+```
+:::
+
 ### Atributos
 | Atributo              | Descripción                              | Tipo                              | Valores aceptados | Por defecto |
 | --------------------- | ---------------------------------------- | --------------------------------- | ----------------- | ----------- |
@@ -1017,6 +1114,9 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
 | filter-node-method    | Esta función se ejecutará en cada nodo cuando se use el método filtrtar, si devuelve `false` el nodo se oculta | Function(value, data, node)       | —                 | —           |
 | accordion             | Si solo un nodo de cada nivel puede expandirse a la vez | boolean                           | —                 | false       |
 | indent                | Indentación horizontal de los nodos en niveles adyacentes, en pixeles | number                            | —                 | 16          |
+| draggable             | whether enable tree nodes drag and drop | boolean            | —    | false |
+| allow-drag            | this function will be executed before dragging a node. if return `false`, the node can not be drag.  | Function(node)  | —  | —  |
+| allow-drop            | this function will be executed when dragging enter a node. if return `false`, dragging node can not be drop at the node. | Function(draggingNode, dropNode)  | —    | —     |
 
 ### props
 | Atributo | Descripción                              | Tipo                          | Valores aceptados | Por defecto |
@@ -1058,6 +1158,12 @@ Solo puede ser expandido un nodo del mismo nivel a la vez.
 | current-change    | cambia cuando el nodo actual cambia      | dos parámetros: objeto nodo que se corresponde al nodo actual y propiedad `node` del TreeNode |
 | node-expand       | se lanza cuando el nodo actual se abre   | tres parámetros: el objeto del nodo abierto, propiedad `node` de TreeNode y el TreeNode en si |
 | node-collapse     | se lanza cuando el nodo actual se cierra | tres parámetros: el objeto del nodo cerrado, propiedad `node` de TreeNode y el TreeNode en si |
+| node-drag-start | triggers when dragging start   | two parameters: node object corresponding to the dragging node、event. |
+| node-drag-enter | triggers when dragging node enters a node  | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging enter node、event. |
+| node-drag-leave | triggers when dragging node leaves a node  | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging leave node、event.  |
+| node-drag-over | triggers when dragging over a node（like browser mouseover event） | three parameters: node object corresponding to the dragging node、node object corresponding to the dragging over node、event.  |
+| node-drag-end  | triggers when dragging end  | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
+| node-drop  | triggers after dragging and dropping onto a node  | four parameters: node object corresponding to the dragging node、node object corresponding to the dragging end node、node drop type (before、after、inner)、event. |
 
 ### Scoped slot
 | name | Description |

diff --git a/examples/docs/zh-CN/tree.md b/examples/docs/zh-CN/tree.md
@@ -1065,7 +1065,7 @@
 
 ### 可拖拽节点
 
-通过draggable属性可让节点变为可拖拽，节点只能放到相同level节点旁边。
+通过 draggable 属性可让节点变为可拖拽。
 
 :::demo
 ```html
@@ -1076,7 +1076,9 @@
   @node-drag-start="handleDragStart"
   @node-drag-enter="handleDragEnter"
   @node-drag-leave="handleDragLeave"
+  @node-drag-over="handleDragOver"
   @node-drag-end="handleDragEnd"
+  @node-drop="handleDrop"
   draggable
   :allow-drop="allowDrop"
   :allow-drag="allowDrag">
@@ -1141,24 +1143,28 @@
       handleDragStart(node, ev) {
         console.log('drag start', node);
       },
-      handleDragEnter(node, ev) {
-        console.log('tree drag enter: ', node.label);
+      handleDragEnter(draggingNode, dropNode, ev) {
+        console.log('tree drag enter: ', dropNode.label);
       },
-      handleDragLeave(node, ev) {
-        console.log('tree drag leave: ', node.label);
+      handleDragLeave(draggingNode, dropNode, ev) {
+        console.log('tree drag leave: ', dropNode.label);
       },
-      handleDragEnd(from, target, position, ev) {
-        console.log('tree drag end: ', target.label);
-        if (position !== null) {
-          console.log(`target position: parent node: ${position.parent.label}, index: ${position.index}`);
-        }
+      handleDragOver(draggingNode, dropNode, ev) {
+        console.log('tree drag over: ', dropNode.label);
       },
-      allowDrop(from, target) {
-        return target.data.label !== '二级 3-1';
+      handleDragEnd(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drag end: ', dropNode.label, dropType);
       },
-      allowDrag(node) {
-        return node.data.label.indexOf('三级 3-1-1') === -1;
+      handleDrop(draggingNode, dropNode, dropType, ev) {
+        console.log('tree drop: ', dropNode.label, dropType);
+      },
+      allowDrop(draggingNode, dropNode) {
+        return dropNode.data.label !== '二级 3-1';
       },
+      allowDrag(draggingNode) {
+        return draggingNode.data.label.indexOf('三级 3-1-1') === -1;
+      }
+    }
   };
 </script>
 ```
@@ -1187,8 +1193,8 @@
 | indent                | 相邻级节点间的水平缩进，单位为像素                 | number                     | —    | 16 |
 | lazy                  | 是否懒加载子节点，需与 load 方法结合使用           | boolean                     | —    | false |
 | draggable             | 是否开启拖拽节点功能                                   | boolean            | —    | false |
-| allow-drag            | 判断节点能否被拖拽                  | Function(Node)  | —  | —  |
-| allow-drop            | 拖拽时判定位置能否被放置             | Function(fromNode, toNode)  | —    | —     |
+| allow-drag            | 判断节点能否被拖拽                  | Function(node)  | —  | —  |
+| allow-drop            | 拖拽时判定位置能否被放置             | Function(draggingNode, dropNode)  | —    | —     |
 
 ### props
 | 参数       | 说明                | 类型     | 可选值  | 默认值  |
@@ -1233,10 +1239,12 @@
 | current-change | 当前选中节点变化时触发的事件 | 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象          |
 | node-expand    | 节点被展开时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
 | node-collapse  | 节点被关闭时触发的事件    | 共三个参数，依次为：传递给 `data` 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 |
-| node-drag-start| 节点开始拖拽时触发的事件  | 共两个参数，依次为：被拖拽节点对应的 Node、Vue传来的drag event。   |
-| node-drag-enter| 拖拽进入其他节点时触发的事件  | 共两个参数，依次为：所进入节点对应的 Node、Vue传来的drag event。   |
-| node-drag-leave| 拖拽离开某个节点时触发的事件  | 共两个参数，依次为：所离开节点对应的 Node、Vue传来的drag event。（注意：上个节点的leave事件有可能在下个节点enter之后执行）   |
-| node-drag-end  | 拖拽结束时触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后指向的节点、被拖拽节点的放置位置{ parent: 位置的父节点, index: 在父节点中的序号 }、Vue传来的drag event。|
+| node-drag-start | 节点开始拖拽时触发的事件  | 共两个参数，依次为：被拖拽节点对应的 Node、event。 |
+| node-drag-enter | 拖拽进入其他节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event。|
+| node-drag-leave | 拖拽离开某个节点时触发的事件  | 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event。 |
+| node-drag-over | 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） | 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event。 |
+| node-drag-end  | 拖拽结束时（可能未成功）触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event。|
+| node-drop  | 拖拽成功完成时触发的事件  | 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event。|
 
 ### Scoped slot
 | name | 说明 |

diff --git a/packages/theme-chalk/src/tree.scss b/packages/theme-chalk/src/tree.scss
@@ -23,9 +23,10 @@
     color: mix($--color-primary, rgb(158, 68, 0), 50%);
   }
 
-  @include e(drag-indicator) {
+  @include e(drop-indicator) {
     position: absolute;
-    width: 100%;
+    left: 0;
+    right: 0;
     height: 1px;
     background-color: $--color-primary;
   }
@@ -39,6 +40,14 @@
       background-color: $--tree-node-hover-color;
     }
   }
+
+  @include when(drop-inner) {
+    > .el-tree-node__content .el-tree-node__label {
+      background-color: $--color-primary;
+      color: #fff;
+    }
+  }
+
   @include e(content) {
     display: flex;
     align-items: center;
@@ -55,14 +64,15 @@
       background-color: $--tree-node-hover-color;
     }
 
-    .el-tree.dragging & {
+    .el-tree.is-dragging & {
       cursor: move;
 
       & * {
         pointer-events: none;
       }
     }
-    .el-tree.dragging.drop-not-allow & {
+
+    .el-tree.is-dragging.is-drop-not-allow & {
       cursor: not-allowed;
     }
   }