增加节点和拖拽组合使用示例

demo/demolist/Demo7.js

@@ -1,7 +1,7 @@
 /**
  *
  * @title Tree增加节点
- * @description 
+ * @description 增加节点和拖拽组合使用示例
  *
  */
 
@@ -128,6 +128,54 @@ class Demo7 extends Component {
     this.addNode(prKey, nodeItem);
   }
 
+  onDragEnter = (info) => {
+    console.log(info);
+    // expandedKeys 需要受控时设置
+    // this.setState({
+    //   expandedKeys: info.expandedKeys,
+    // });
+  }
+  onDrop = (info) => {
+    console.log(info);
+    const dropKey = info.node.props.eventKey;
+    const dragKey = info.dragNode.props.eventKey;
+    // const dragNodesKeys = info.dragNodesKeys;
+    const loop = (data, key, callback) => {
+      data.forEach((item, index, arr) => {
+        if (item.key === key) {
+          return callback(item, index, arr);
+        }
+        if (item.children) {
+          return loop(item.children, key, callback);
+        }
+      });
+    };
+    const data = [...this.state.treeData];
+    let dragObj;
+    loop(data, dragKey, (item, index, arr) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+    if (info.dropToGap) {
+      let ar;
+      let i;
+      loop(data, dropKey, (item, index, arr) => {
+        ar = arr;
+        i = index;
+      });
+      ar.splice(i, 0, dragObj);
+    } else {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到尾部，可以是随意位置
+        item.children.push(dragObj);
+      });
+    }
+    this.setState({
+      treeData: data,
+    });
+  }
+
   render() {
     const loop = data => data.map((item) => {
       if (item.children) {
@@ -139,7 +187,13 @@ class Demo7 extends Component {
     console.log('defaultKeys--' + this.state.defaultExpandedKeys);
     return (
       <div>
-        <Tree onSelect={this.onSelect} defaultExpandedKeys={this.state.defaultExpandedKeys} className="myCls">
+        <Tree 
+        className="myCls"
+        onSelect={this.onSelect} 
+        defaultExpandedKeys={this.state.defaultExpandedKeys} 
+        draggable
+        onDragEnter={this.onDragEnter}
+        onDrop={this.onDrop}>
           {treeNodes}
         </Tree>
         <Button colors="primary" onClick={this.clickFun}>