diff --git a/examples/interaction/combo/index.en.md b/examples/interaction/combo/index.en.md
index b25792f0d0..e2b17b5c52 100644
--- a/examples/interaction/combo/index.en.md
+++ b/examples/interaction/combo/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Node Combo
-order: 3
+order: 4
 ---
 
 New feature of V3.5. There are 2 kinds of built-in combos in G6, which can be extended by configurations([docs](/en/docs/manual/middle/elements/combos/defaultCombo)) and custom mechanism ([docs](/en/docs/manual/advanced/custom-combo), [demo](/en/examples/item/customCombo)). The following two examples allow users to drag the combo or node to change the hierarchy, and double click to collapse/expand a combo.
diff --git a/examples/interaction/combo/index.zh.md b/examples/interaction/combo/index.zh.md
index 030f90c472..19abb88328 100644
--- a/examples/interaction/combo/index.zh.md
+++ b/examples/interaction/combo/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 节点分组 Combo
-order: 3
+order: 4
 ---
 
 自 V3.5 起支全新节点分组机制 Combo。内置了 2 种不同类型的 Combo，支持通过配置（[文档](/zh/docs/manual/middle/elements/combos/defaultCombo)）进行扩展，支持自定义（[文档](/zh/docs/manual/advanced/custom-combo)，[Demo](/zh/examples/item/customCombo)）。下面两个例子允许节点和 Combo 的拖拽改变从属关系，双击收缩/展开 Combo。
diff --git a/examples/interaction/label/index.en.md b/examples/interaction/label/index.en.md
index 57bca8d88c..26c683635b 100644
--- a/examples/interaction/label/index.en.md
+++ b/examples/interaction/label/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Label and Background Updating
-order: 2
+order: 3
 ---
 
 Update the label or background of items with interaction.
diff --git a/examples/interaction/label/index.zh.md b/examples/interaction/label/index.zh.md
index 8218144c39..78ffb4d756 100644
--- a/examples/interaction/label/index.zh.md
+++ b/examples/interaction/label/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 改变标签或背景
-order: 2
+order: 3
 ---
 
 交互过程中动态改变节点或边上的文本。
diff --git a/examples/interaction/loadData/index.en.md b/examples/interaction/loadData/index.en.md
index 61327a9ecd..23fb28b27e 100644
--- a/examples/interaction/loadData/index.en.md
+++ b/examples/interaction/loadData/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Onload Data to TreeGraph
-order: 1
+order: 2
 ---
 
 Click the nodes on the tree graph to onload multiple data.
diff --git a/examples/interaction/loadData/index.zh.md b/examples/interaction/loadData/index.zh.md
index d4d002df74..ec232130c1 100644
--- a/examples/interaction/loadData/index.zh.md
+++ b/examples/interaction/loadData/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 动态加载树图数据
-order: 1
+order: 2
 ---
 
 点击树图中的节点，动态加载数据。
diff --git a/examples/interaction/moveSubtree/demo/dragSubtree.js b/examples/interaction/moveSubtree/demo/dragSubtree.js
new file mode 100644
index 0000000000..516d681ce2
--- /dev/null
+++ b/examples/interaction/moveSubtree/demo/dragSubtree.js
@@ -0,0 +1,138 @@
+import G6 from '@antv/g6';
+
+const container = document.getElementById('container');
+const descriptionDiv = document.createElement('div');
+descriptionDiv.innerHTML = 'Move a subtree to a new parent by dragging the root node of the subtree.';
+container.appendChild(descriptionDiv);
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+  .then(res => res.json())
+  .then(data => {
+    const width = document.getElementById('container').scrollWidth;
+    const height = document.getElementById('container').scrollHeight || 500;
+    const graph = new G6.TreeGraph({
+      container: 'container',
+      width,
+      height,
+      modes: {
+        default: [
+          'drag-canvas',
+          'zoom-canvas',
+          {
+            type: 'drag-node',
+            enableDelegate: true
+          }
+        ],
+      },
+      defaultNode: {
+        size: [26, 26],
+        anchorPoints: [
+          [0, 0.5],
+          [1, 0.5],
+        ],
+        style: {
+          fill: '#C6E5FF',
+          stroke: '#5B8FF9',
+        },
+      },
+      defaultEdge: {
+        type: 'cubic-horizontal',
+        style: {
+          stroke: '#A3B1BF',
+        },
+      },
+      nodeStateStyles: {
+        closest: {
+          fill: '#f00'
+        }
+      },
+      layout: {
+        type: 'compactBox',
+        direction: 'LR',
+        getId: function getId(d) {
+          return d.id;
+        },
+        getHeight: function getHeight() {
+          return 16;
+        },
+        getWidth: function getWidth() {
+          return 16;
+        },
+        getVGap: function getVGap() {
+          return 10;
+        },
+        getHGap: function getHGap() {
+          return 100;
+        },
+      },
+    });
+
+    graph.node(function (node) {
+      return {
+        label: node.id,
+        labelCfg: {
+          offset: 10,
+          position: node.children && node.children.length > 0 ? 'left' : 'right',
+        },
+      };
+    });
+
+    graph.data(data);
+    graph.render();
+    graph.fitView();
+
+
+    let minDisNode;
+    graph.on('node:dragstart', e => {
+      minDisNode = undefined;
+    });
+    graph.on('node:drag', e => {
+      minDisNode = undefined;
+      const item = e.item;
+      const model = item.getModel();
+      const nodes = graph.getNodes();
+      let minDis = Infinity;
+      nodes.forEach(inode => {
+        graph.setItemState(inode, 'closest', false);
+        const node = inode.getModel();
+        if (node.id === model.id) return;
+        const dis = (node.x - e.x) * (node.x - e.x) + (node.y - e.y) * (node.y - e.y);
+        if (dis < minDis) {
+          minDis = dis;
+          minDisNode = inode;
+        }
+      });
+      if (minDis < 2000) graph.setItemState(minDisNode, 'closest', true);
+      else minDisNode = undefined;
+    });
+
+    graph.on('node:dragend', e => {
+      if (!minDisNode) {
+        descriptionDiv.innerHTML = 'Failed. No node close to the dragged node.'
+        return;
+      }
+      const item = e.item;
+      const id = item.getID();
+      const data = graph.findDataById(id);
+      // if the minDisNode is a descent of the dragged node, return
+      let isDescent = false;
+      const minDisNodeId = minDisNode.getID();
+      G6.Util.traverseTree(data, d => {
+        if (d.id === minDisNodeId) isDescent = true;
+      });
+      if (isDescent) {
+
+        descriptionDiv.innerHTML = 'Failed. The target node is a descendant of the dragged node.'
+        return;
+      }
+
+      const removed = graph.removeChild(id);
+      setTimeout(() => {
+        const newParentData = graph.findDataById(minDisNodeId);
+        if (newParentData.children) newParentData.children.push(data)
+        else newParentData.children = [data];
+        graph.layout();
+        descriptionDiv.innerHTML = 'Success.'
+      }, 600);
+    });
+  });
diff --git a/examples/interaction/moveSubtree/demo/meta.json b/examples/interaction/moveSubtree/demo/meta.json
new file mode 100644
index 0000000000..6f9dcbcf82
--- /dev/null
+++ b/examples/interaction/moveSubtree/demo/meta.json
@@ -0,0 +1,16 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "dragSubtree.js",
+      "title": {
+        "zh": "拖拽子树改变结构",
+        "en": "Move Subtree to New Parent"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*EU_yRa8hMJUAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/interaction/moveSubtree/index.en.md b/examples/interaction/moveSubtree/index.en.md
new file mode 100644
index 0000000000..023b40e326
--- /dev/null
+++ b/examples/interaction/moveSubtree/index.en.md
@@ -0,0 +1,10 @@
+---
+title: Move Subtree to New Parent
+order: 1
+---
+
+Move a subtree to a new parent by dragging the root node of the subtree.
+
+## Usage
+
+Drag the root node of the subtree to get closed to a new parent which is not a descendant node of the dragged node, drop the node to finish.
\ No newline at end of file
diff --git a/examples/interaction/moveSubtree/index.zh.md b/examples/interaction/moveSubtree/index.zh.md
new file mode 100644
index 0000000000..d6858432f1
--- /dev/null
+++ b/examples/interaction/moveSubtree/index.zh.md
@@ -0,0 +1,10 @@
+---
+title: 拖拽子树改变结构
+order: 1
+---
+
+拖拽子树改变结构。
+
+## 使用指南
+
+通过拖拽子树的跟节点，靠近新的父节点后放下，可将该子树从原来位置删除，追加到新父节点下，从而改变树的结构。若新父节点是被拖拽子树中的一个节点，则拖拽改变结构将不会生效。
diff --git a/examples/interaction/nodeGroup/index.en.md b/examples/interaction/nodeGroup/index.en.md
index 15731d6853..1da759a9ff 100644
--- a/examples/interaction/nodeGroup/index.en.md
+++ b/examples/interaction/nodeGroup/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Node Group
-order: 4
+order: 5
 ---
 
 G6 supports node group. We recommend to use the new mechanism [Combo](/en/examples/interaction/combo).
diff --git a/examples/interaction/nodeGroup/index.zh.md b/examples/interaction/nodeGroup/index.zh.md
index bb4354e0fe..3677a406d9 100644
--- a/examples/interaction/nodeGroup/index.zh.md
+++ b/examples/interaction/nodeGroup/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 节点分组 Group
-order: 4
+order: 5
 ---
 
 G6 支持节点分组。建议使用新的分组机制 [Combo](/zh/examples/interaction/combo).
diff --git a/examples/interaction/partialResponse/index.en.md b/examples/interaction/partialResponse/index.en.md
index 764b78151f..aedccc829e 100644
--- a/examples/interaction/partialResponse/index.en.md
+++ b/examples/interaction/partialResponse/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Region Response
-order: 6
+order: 7
 ---
 
 Region response on a node or edge.
diff --git a/examples/interaction/partialResponse/index.zh.md b/examples/interaction/partialResponse/index.zh.md
index 1e2a20338d..67731845af 100644
--- a/examples/interaction/partialResponse/index.zh.md
+++ b/examples/interaction/partialResponse/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 响应区域事件
-order: 6
+order: 7
 ---
 
 区域响应。
diff --git a/examples/interaction/position/index.en.md b/examples/interaction/position/index.en.md
index 736fca87e8..b2f884b54e 100644
--- a/examples/interaction/position/index.en.md
+++ b/examples/interaction/position/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Click to Focus a Node
-order: 5
+order: 6
 ---
 
 Move the graph by interaction.
diff --git a/examples/interaction/position/index.zh.md b/examples/interaction/position/index.zh.md
index befa9294d1..360b8ef94f 100644
--- a/examples/interaction/position/index.zh.md
+++ b/examples/interaction/position/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 聚焦一个节点
-order: 5
+order: 6
 ---
 
 通过交互改变节点的位置。
diff --git a/examples/interaction/setMode/index.en.md b/examples/interaction/setMode/index.en.md
index 236985576d..f49037c411 100644
--- a/examples/interaction/setMode/index.en.md
+++ b/examples/interaction/setMode/index.en.md
@@ -1,6 +1,6 @@
 ---
 title: Change Mode to Add items
-order: 7
+order: 8
 ---
 
 You can change to different modes with the selector on the left top. Dragging node, adding node, adding edge are enabled in different modes. This mechanism help developers to avoid the conflict of same events in different behaviors.
diff --git a/examples/interaction/setMode/index.zh.md b/examples/interaction/setMode/index.zh.md
index ea9823c9e4..02518f61f2 100644
--- a/examples/interaction/setMode/index.zh.md
+++ b/examples/interaction/setMode/index.zh.md
@@ -1,6 +1,6 @@
 ---
 title: 切换模式增加点和边
-order: 7
+order: 8
 ---
 
 使用左上角的下拉框切换交互模式，在不同模式下拖动节点、增加节点、增加边，从而避免交互事件的冲突。
diff --git a/examples/net/dagreFlow/demo/lrDagreUL.js b/examples/net/dagreFlow/demo/lrDagreUL.js
new file mode 100644
index 0000000000..bce168516e
--- /dev/null
+++ b/examples/net/dagreFlow/demo/lrDagreUL.js
@@ -0,0 +1,137 @@
+import G6 from '@antv/g6';
+const data = {
+    nodes: [
+        {
+            id: '0',
+            label: '0',
+        },
+        {
+            id: '1',
+            label: '1',
+        },
+        {
+            id: '2',
+            label: '2',
+        },
+        {
+            id: '3',
+            label: '3',
+        },
+        {
+            id: '4',
+            label: '4',
+        },
+        {
+            id: '5',
+            label: '5',
+        },
+        {
+            id: '6',
+            label: '6',
+        },
+        {
+            id: '7',
+            label: '7',
+        },
+        {
+            id: '8',
+            label: '8',
+        },
+        {
+            id: '9',
+            label: '9',
+        },
+    ],
+    edges: [
+        {
+            source: '0',
+            target: '1',
+        },
+        {
+            source: '0',
+            target: '2',
+        },
+        {
+            source: '1',
+            target: '4',
+        },
+        {
+            source: '0',
+            target: '3',
+        },
+        {
+            source: '3',
+            target: '4',
+        },
+        {
+            source: '4',
+            target: '5',
+        },
+        {
+            source: '4',
+            target: '6',
+        },
+        {
+            source: '5',
+            target: '7',
+        },
+        {
+            source: '5',
+            target: '8',
+        },
+        {
+            source: '8',
+            target: '9',
+        },
+        {
+            source: '2',
+            target: '9',
+        },
+        {
+            source: '3',
+            target: '9',
+        },
+    ],
+};
+const width = document.getElementById('container').scrollWidth;
+const height = document.getElementById('container').scrollHeight || 500;
+const graph = new G6.Graph({
+    container: 'container',
+    width,
+    height,
+    fitView: true,
+    modes: {
+        default: ['drag-canvas', 'drag-node'],
+    },
+    layout: {
+        type: 'dagre',
+        rankdir: 'LR',
+        align: 'UL',
+        controlPoints: true,
+        nodesepFunc: () => 1,
+        ranksepFunc: () => 1,
+    },
+    defaultNode: {
+        size: [30, 20],
+        type: 'rect',
+        style: {
+            lineWidth: 2,
+            stroke: '#5B8FF9',
+            fill: '#C6E5FF',
+        },
+    },
+    defaultEdge: {
+        type: 'polyline',
+        size: 1,
+        color: '#e2e2e2',
+        style: {
+            endArrow: {
+                path: 'M 0,0 L 8,4 L 8,-4 Z',
+                fill: '#e2e2e2'
+            },
+            radius: 20
+        },
+    },
+});
+graph.data(data);
+graph.render();
diff --git a/examples/net/dagreFlow/demo/meta.json b/examples/net/dagreFlow/demo/meta.json
index 59531bf6cd..236c0da438 100644
--- a/examples/net/dagreFlow/demo/meta.json
+++ b/examples/net/dagreFlow/demo/meta.json
@@ -12,6 +12,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*2uMmRo5wYPUAAAAAAAAAAABkARQnAQ"
     },
+    {
+      "filename": "lrDagreUL.js",
+      "title": {
+        "zh": "自左向右的 Dagre 上对齐",
+        "en": "Dagre from Left to Right"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*LJpmR4G7J3YAAAAAAAAAAABkARQnAQ"
+    },
     {
       "filename": "lrDagre.js",
       "title": {
@@ -29,4 +37,4 @@
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*VkwOTL2UyN0AAAAAAAAAAABkARQnAQ"
     }
   ]
-}
+}
\ No newline at end of file