diff --git a/packages/canvas/container/src/container.js b/packages/canvas/container/src/container.js
index 3c1b0a79a..a3a9dddab 100644
--- a/packages/canvas/container/src/container.js
+++ b/packages/canvas/container/src/container.js
@@ -874,6 +874,8 @@ export const canvasApi = {
   setDesignMode,
   getDocument,
   canvasDispatch,
+  getConfigure,
+  allowInsert,
   Builtin,
   removeBlockCompsCache: (...args) => {
     return canvasState.renderer.removeBlockCompsCache(...args)
diff --git a/packages/plugins/tree/src/DraggableTree.vue b/packages/plugins/tree/src/DraggableTree.vue
new file mode 100644
index 000000000..fc7252a22
--- /dev/null
+++ b/packages/plugins/tree/src/DraggableTree.vue
@@ -0,0 +1,387 @@
+<template>
+  <!-- TODO 后续抽取公共逻辑，迁移至公共组件 -->
+  <div class="draggable-tree" @dragleave="handleDragLeaveContainer">
+    <div
+      v-for="row in rows"
+      :key="row.id"
+      v-show="!row.collapsed"
+      :class="[
+        'tree-row',
+        'flex-center',
+        {
+          active: active === row.id,
+          dragging: draggingState.hovering?.id === row.id,
+          'border-all': draggingState.hovering?.id === row.id && draggingState.position === 'center',
+          forbid: draggingState.forbidInsert
+        }
+      ]"
+      :draggable="draggable ? 'true' : undefined"
+      @click="handleClickRow(row)"
+      @mouseenter="handleMouseEnterRow(row)"
+      @dragstart="handleDragStart($event, row)"
+      @dragover="handleDragOver($event, row)"
+      @dragenter="handleDragOver($event, row)"
+      @drop="handleDrop"
+      @dragend="handleDragEnd"
+    >
+      <div class="content flex-center" :style="{ paddingLeft: `${12 * row.level}px` }">
+        <span v-if="!row.hasChildren" class="expand-icon"></span>
+        <svg-icon
+          v-if="row.hasChildren"
+          name="dropdown"
+          :class="['expand-icon', { rotate: collapseMap[row.id] }]"
+          @click.stop="switchCollapse(row.id)"
+        ></svg-icon>
+        <div
+          :class="[
+            'slot-content',
+            'flex-center',
+            {
+              [draggingState.borderClass]: draggingState.hovering?.id === row.id && draggingState.position !== 'center',
+              forbid: draggingState.forbidInsert
+            }
+          ]"
+        >
+          <slot name="content" v-bind="row"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineEmits, defineProps, reactive, ref } from 'vue'
+
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => []
+  },
+  active: {
+    type: String
+  },
+  idKey: {
+    type: String,
+    default: 'id'
+  },
+  labelKey: {
+    type: String,
+    default: 'label'
+  },
+  childrenKey: {
+    type: String,
+    default: 'children'
+  },
+  draggable: {
+    type: Boolean,
+    default: false
+  },
+  disallowDrop: {
+    type: Function,
+    default: () => false
+  }
+})
+
+/**
+ * @typedef {Object} Node
+ * @property {string} id
+ * @property {string} label
+ * @property {Node[]} [children]
+ * @property {any} rawData
+ */
+
+/**
+ *
+ * @param dataItem
+ * @returns {Node}
+ */
+const normalizeDataItem = (dataItem) => {
+  const { idKey, labelKey, childrenKey } = props
+
+  const id = dataItem[idKey]
+  const label = dataItem[labelKey]
+  const children = dataItem[childrenKey]
+
+  const result = { id, label, rawData: dataItem }
+
+  if (Array.isArray(children)) {
+    result.children = children.map((child) => normalizeDataItem(child))
+  }
+
+  return result
+}
+
+const normalizeData = (data) => {
+  if (!Array.isArray(data)) {
+    return []
+  }
+
+  return data.map((item) => normalizeDataItem(item))
+}
+
+const normalizedData = computed(() => normalizeData(props.data))
+
+const useCollapseMap = () => {
+  const collapseMap = ref({})
+
+  const setCollapse = (id, value) => {
+    collapseMap.value[id] = value
+  }
+
+  const switchCollapse = (id) => {
+    collapseMap.value[id] = !collapseMap.value[id]
+  }
+
+  return { collapseMap, setCollapse, switchCollapse }
+}
+
+const { collapseMap, setCollapse, switchCollapse } = useCollapseMap()
+
+/**
+ * @typedef {Object} RowItem
+ * @property {string} id
+ * @property {string} label
+ * @property {number} level level 为 0 表示顶层节点
+ * @property {string} [parentId]
+ * @property {RowItem} parent
+ * @property {boolean} hasChildren
+ * @property {boolean} collapsed
+ * @property {any} rawData
+ */
+
+/**
+ *
+ * @param {Node} node
+ * @param parentId
+ * @param level
+ * @param collapsed
+ * @returns {RowItem[]}
+ */
+const flattenNode = (node, parentId, level = 0, collapsed = false) => {
+  const { children, ...rest } = node
+
+  const descendantNodes = (children || [])
+    .map((child) => flattenNode(child, node.id, level + 1, collapsed || collapseMap.value[node.id]))
+    .flat()
+
+  const rowItem = {
+    ...rest,
+    parentId,
+    level,
+    hasChildren: children?.length > 0,
+    collapsed
+  }
+
+  descendantNodes.forEach((node) => {
+    if (!node.parent) {
+      node.parent = rowItem
+    }
+  })
+
+  return [rowItem].concat(descendantNodes)
+}
+
+/**
+ *
+ * @param {Node[]} nodes
+ * @returns {RowItem[]}
+ */
+const flattenNodes = (nodes) => {
+  const dummyNode = { children: nodes }
+  return flattenNode(dummyNode, null, -1).slice(1)
+}
+
+const rows = computed(() => flattenNodes(normalizedData.value))
+
+const emit = defineEmits(['click', 'mouseenter', 'drop'])
+
+const handleClickRow = (row) => {
+  emit('click', row)
+}
+
+const handleMouseEnterRow = (row) => {
+  emit('mouseenter', row)
+}
+
+const useDraggingState = () => {
+  /**
+   * @type {{dragged?: RowItem, hovering?: RowItem, position: string, borderClass: string, forbidInsert: boolean}}
+   */
+  const initialState = { dragged: null, hovering: null, position: '', borderClass: '', forbidInsert: false }
+  const draggingState = reactive({ ...initialState })
+  const resetDraggingState = () => {
+    Object.assign(draggingState, initialState)
+  }
+  return { draggingState, resetDraggingState }
+}
+
+const { draggingState, resetDraggingState } = useDraggingState()
+
+const handleDragStart = (event, row) => {
+  if (!props.draggable) {
+    return
+  }
+
+  // 去掉ghost image
+  event.dataTransfer.setDragImage(new Image(), 0, 0)
+
+  draggingState.dragged = row
+
+  // 收起有子节点的节点
+  if (row.hasChildren) {
+    setCollapse(row.id, true)
+  }
+}
+
+const getPositionData = (event) => {
+  const rect = event.currentTarget.getBoundingClientRect()
+  const offsetY = event.clientY - rect.top
+
+  // 判断鼠标的位置并设置边框样式
+  const threshold = 8
+  if (offsetY <= threshold) {
+    // 顶部边框
+    return { position: 'top', borderClass: 'border-top' }
+  }
+
+  if (offsetY >= rect.height - threshold) {
+    // 底部边框
+    return { position: 'bottom', borderClass: 'border-bottom' }
+  }
+
+  return { position: 'center', borderClass: 'border-all' }
+}
+
+const handleDragOver = (event, row) => {
+  if (!props.draggable) {
+    return
+  }
+
+  const data = getPositionData(event)
+
+  // 无法将拖拽节点设置为根节点的兄弟节点
+  if (row.id === rows.value[0].id && data.position !== 'center') {
+    event.preventDefault()
+    return
+  }
+
+  if (props.disallowDrop({ dragged: draggingState.dragged, target: row, position: data.position })) {
+    Object.assign(draggingState, { ...data, hovering: row, forbidInsert: true })
+    return
+  }
+
+  event.preventDefault()
+
+  Object.assign(draggingState, { ...data, hovering: row, forbidInsert: false })
+}
+
+const handleDrop = () => {
+  if (!props.draggable || draggingState.forbidInsert) {
+    return
+  }
+
+  const { dragged, hovering, position } = draggingState
+
+  emit('drop', { dragged, target: hovering, position })
+}
+
+const handleDragEnd = () => {
+  resetDraggingState()
+}
+
+const handleDragLeaveContainer = (event) => {
+  if (!props.draggable) {
+    return
+  }
+
+  const rect = event.currentTarget.getBoundingClientRect()
+  const threshold = 4
+  // 如果拖拽时，拖拽到其他元素上，可能触发dragleave事件，所以再加个坐标判断
+  if (
+    event.clientX <= rect.left + threshold ||
+    event.clientX >= rect.right - threshold ||
+    event.clientY <= rect.top + threshold ||
+    event.clientY >= rect.bottom - threshold
+  ) {
+    Object.assign(draggingState, { hovering: null })
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.draggable-tree {
+  .tree-row {
+    height: 24px;
+    width: fit-content;
+    min-width: 100%;
+    padding: 0 8px;
+
+    &,
+    * {
+      cursor: pointer;
+    }
+    &:hover,
+    &.active {
+      background-color: var(--te-common-bg-container);
+    }
+    &.dragging {
+      background-color: var(--te-common-bg-info);
+      &.forbid {
+        background-color: var(--te-common-bg-error);
+      }
+    }
+
+    & > * {
+      flex-shrink: 0;
+    }
+  }
+  .content {
+    flex: 1;
+    height: 100%;
+  }
+
+  .rotate {
+    transform: rotate(-90deg);
+  }
+  .expand-icon {
+    font-size: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+  .slot-content {
+    flex: 1;
+    height: 100%;
+    padding: 0 4px;
+  }
+
+  .border-top {
+    box-shadow: inset 0 2px 0 0 var(--te-common-text-checked);
+    &.forbid {
+      box-shadow: inset 0 2px 0 0 var(--te-common-color-error);
+    }
+  }
+  .border-bottom {
+    box-shadow: inset 0 -2px 0 0 var(--te-common-text-checked);
+    &.forbid {
+      box-shadow: inset 0 -2px 0 0 var(--te-common-color-error);
+    }
+  }
+  .border-all {
+    outline: 1px solid var(--te-common-text-checked);
+    outline-offset: -1px;
+    &.forbid {
+      outline: 1px solid var(--te-common-color-error);
+    }
+  }
+}
+svg {
+  color: var(--te-common-icon-secondary);
+  &:hover {
+    color: var(--te-common-icon-hover);
+  }
+}
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/packages/plugins/tree/src/Main.vue b/packages/plugins/tree/src/Main.vue
index 015a0c369..8a0e0b7fa 100644
--- a/packages/plugins/tree/src/Main.vue
+++ b/packages/plugins/tree/src/Main.vue
@@ -9,64 +9,49 @@
       ></svg-button>
     </template>
     <template #content>
-      <div class="tree-wrap lowcode-scrollbar">
-        <tiny-grid
-          ref="gridRef"
-          :data="state.pageSchema"
-          :tree-config="{ children: 'children', expandAll: state.expandAll, renderIcon: renderIconFn }"
-          :show-header="false"
-          :highlight-hover-row="false"
-          :auto-resize="true"
-          :row-class-name="getClassName"
-        >
-          <tiny-grid-column field="componentName" tree-node>
-            <template #default="data">
-              <span
-                class="tree-box"
-                :schemaId="data.row?.id"
-                :type="data.row.componentName"
-                @mouseover="mouseover(data.row)"
-                @mouseleave="mouseleave(data.row)"
-                @click="checkElement(data.row)"
-              >
-                <span class="tree-content" :class="{ 'node-isblock': data.row?.componentType === 'Block' }">
-                  <!-- <span class="node-icon">
-                    <component :is="getIcon(data.row)" style="width: 1em; height: 1em"></component>
-                  </span> -->
-                  <span>{{ data.row.componentName }}</span>
-                </span>
-                <span v-show="data.row.showEye" class="tree-handle" @mouseup="showNode(data.row)">
-                  <icon-eyeopen v-show="data.row.show"></icon-eyeopen>
-                  <icon-eyeclose v-show="!data.row.show"></icon-eyeclose>
-                </span>
-              </span>
+      <draggable-tree
+        label-key="componentName"
+        :data="state.pageSchema"
+        :draggable="true"
+        :active="pageState.currentSchema?.id"
+        :disallow-drop="disallowDrop"
+        class="outline-tree"
+        @click="handleClickRow"
+        @mouseenter="handleMouseEnterRow"
+        @drop="handleDrop"
+      >
+        <template #content="row">
+          <div class="row-content">
+            <svg-icon v-if="getIconName(row)" :name="getIconName(row)"></svg-icon>
+            <span :class="['row-label', { 'node-isblock': row.rawData.componentType === 'Block' }]">{{
+              row.label
+            }}</span>
+            <template v-if="row.id !== 'body'">
+              <svg-icon v-if="eyeOpen(row.id)" name="eye" @mouseup="showNode(row.rawData)"></svg-icon>
+              <svg-icon v-if="!eyeOpen(row.id)" name="eye-invisible" @mouseup="showNode(row.rawData)"></svg-icon>
             </template>
-          </tiny-grid-column>
-        </tiny-grid>
-      </div>
+          </div>
+        </template>
+      </draggable-tree>
     </template>
   </plugin-panel>
 </template>
 
 <script>
-import { reactive, watch, ref, computed, onActivated, onDeactivated } from 'vue'
-import { Grid, GridColumn } from '@opentiny/vue'
+import { reactive, watch, computed, onActivated, onDeactivated, nextTick } from 'vue'
 import { PluginPanel, SvgButton } from '@opentiny/tiny-engine-common'
 import { constants } from '@opentiny/tiny-engine-utils'
-import { IconChevronDown, iconEyeopen, iconEyeclose } from '@opentiny/vue-icon'
 import { useCanvas, useMaterial, useLayout, useMessage } from '@opentiny/tiny-engine-meta-register'
 import { extend } from '@opentiny/vue-renderless/common/object'
 import { typeOf } from '@opentiny/vue-renderless/common/type'
+import DraggableTree from './DraggableTree.vue'
 
 const { PAGE_STATUS } = constants
 export default {
   components: {
-    TinyGrid: Grid,
-    TinyGridColumn: GridColumn,
     PluginPanel,
     SvgButton,
-    IconEyeopen: iconEyeopen(),
-    IconEyeclose: iconEyeclose()
+    DraggableTree
   },
   props: {
     fixedPanels: {
@@ -75,7 +60,7 @@ export default {
   },
   emits: ['close', 'fix-panel'],
   setup(props) {
-    const { pageState, getInstance } = useCanvas()
+    const { pageState } = useCanvas()
     const { getMaterial } = useMaterial()
     const { PLUGIN_NAME } = useLayout()
 
@@ -99,23 +84,13 @@ export default {
         return data
       }
 
-      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body' }]
+      return [{ ...translateChild([extend(true, {}, data)])[0], componentName: 'body', id: 'body' }]
     }
     const state = reactive({
       pageSchema: [],
-      expandAll: true,
-      initSchema: [],
       isLock: computed(
         () => ![PAGE_STATUS.Occupy, PAGE_STATUS.Guest].includes(useLayout().layoutState.pageStatus.state)
-      ),
-      dragState: {
-        allowDrop: true,
-        dragSchema: null,
-        hoverVm: null,
-        currentVm: null,
-        parentNode: null,
-        indicator: true
-      }
+      )
     })
 
     const { subscribe, unsubscribe } = useMessage()
@@ -149,8 +124,8 @@ export default {
       }
     )
 
-    const toggleTree = () => {
-      state.expandAll = !state.expandAll
+    const eyeOpen = (id) => {
+      return pageState.nodesStatus[id] !== false
     }
 
     const showNode = (data) => {
@@ -163,138 +138,88 @@ export default {
       clearSelect()
     }
 
-    const getIcon = (node) => {
-      if (!node.componentName) return undefined
-      const component = getMaterial(node.componentName)
-      return component.icon || 'IconAssociation'
-    }
-
-    const mouseover = (data) => {
+    const handleMouseEnterRow = (row) => {
       if (state.isLock) {
         return
       }
 
       const { hoverNode } = useCanvas().canvasApi.value
 
-      hoverNode(data.id)
-      data.showEye = true
+      hoverNode(row.id)
     }
 
-    const mouseleave = (data) => {
-      if (data && !data.show) {
-        return
+    const disallowDrop = ({ dragged, target, position }) => {
+      if (dragged.id === 'body') {
+        return true
       }
-      data.showEye = false
-    }
 
-    const checkElement = (row) => {
-      if (state.isLock) {
-        return
-      }
-
-      const { selectNode } = useCanvas().canvasApi.value
-      selectNode(row?.id, 'clickTree')
-    }
+      const dropTo = position === 'center' ? target : target.parent
 
-    const gridRef = ref(null)
+      if (dropTo.id === 'body') {
+        return false
+      }
 
-    const rowDrop = () => {}
+      const { getConfigure, allowInsert } = useCanvas().canvasApi.value
 
-    const getClassName = ({ row }) => {
-      const hightLight = pageState?.currentSchema?.id === row.id ? 'high-light-node' : ''
-      return 'nav-tree ' + hightLight
+      return !allowInsert(getConfigure(dropTo.rawData.componentName), dragged.rawData)
     }
 
-    const rowDropMove = (event, originalEvent) => {
-      event.dragged.classList.remove('nodrag')
-      const { clientY } = originalEvent
-      const bottom = event.draggedRect.bottom
-      const distance = Math.abs(clientY - bottom)
-
-      const dragType = event.dragged.querySelector('.tree-box').getAttribute('type')
-      const dragId = event.dragged.querySelector('.tree-box').getAttribute('schemaId')
-      const dragSchema = getInstance(dragId)
-
-      state.dragState.dragSchema = dragSchema
-
-      const relateType = event.related.querySelector('.tree-box').getAttribute('type')
-      const relateId = event.related.querySelector('.tree-box').getAttribute('schemaId')
-      const relateSchema = getInstance(relateId)
-
-      pageState.hoverVm = relateSchema
-
-      const isRelateContainer = dragSchema?.componentName?.container
-      const relateParent = relateSchema?.parent.schema.componentName
-
-      if (dragType === 'col' && isRelateContainer && relateType !== 'col') {
-        state.dragState.indicator = false
-      } else if (dragType === 'col' && !isRelateContainer && relateParent !== 'row') {
-        state.dragState.indicator = false
-      } else if (dragType !== 'col' && isRelateContainer && relateType === 'row') {
-        state.dragState.indicator = false
-      } else if (!relateSchema) {
-        state.dragState.indicator = false
-      } else {
-        state.dragState.indicator = true
+    const handleDrop = ({ dragged, target, position }) => {
+      // dragged和target相同，无需操作
+      if (dragged.id === target.id) {
+        return
       }
-
-      if (!state.dragState.indicator) {
-        event.dragged.classList.add('nodrag')
-        state.dragState.allowDrop = false
-      } else {
-        event.dragged.classList.remove('nodrag')
-        state.dragState.allowDrop = true
+      // 如果target节点为dragged节点的父节点，无需操作
+      if (position === 'center' && target.rawData.children.some((item) => item.id === dragged.id)) {
+        return
       }
-
-      const el = originalEvent.target
-
-      if (
-        distance < 4 &&
-        distance > 1 &&
-        isRelateContainer &&
-        (!relateSchema.schema.children || relateSchema.schema.children.length === 0)
-      ) {
-        state.dragState.parentNode = el
-        el.querySelector('.tiny-grid-tree-wrapper').innerHTML =
-          '<i class="tiny-grid-tree__node-btn tiny-grid-icon__caret-right"></i>'
+      // 如果相邻节点位置仍然不变，无需操作
+      if (position !== 'center') {
+        const targetParentChildren = target.parent.rawData.children
+        const targetIndex = targetParentChildren.findIndex((item) => item.id === target.id)
+        const node = targetParentChildren[position === 'top' ? targetIndex - 1 : targetIndex + 1]
+        if (dragged.id === node?.id) {
+          return
+        }
       }
 
-      if (
-        state.dragState.parentNode &&
-        state.dragState.parentNode.getAttribute('data-rowid') !== el.getAttribute('data-rowid')
-      ) {
-        state.dragState.parentNode.querySelector('.tiny-grid-tree-wrapper').innerHTML = ''
-        state.dragState.parentNode = null
-      }
+      const { insertNode, removeNode, selectNode } = useCanvas().canvasApi.value
+      removeNode(dragged.id)
+      insertNode(
+        { data: dragged.rawData, node: target.rawData, parent: target.parent.rawData },
+        position === 'center' ? 'in' : position
+      )
+      nextTick(() => {
+        selectNode(dragged.id, 'clickTree')
+      })
     }
 
-    watch(
-      () => pageState.isLock,
-      (value) => {
-        setTimeout(rowDrop, 1000)
-        state.isLock = value
+    const handleClickRow = (row) => {
+      if (state.isLock) {
+        return
       }
-    )
 
-    const renderIconFn = (h, { isActive }) =>
-      h(IconChevronDown(), {
-        class: ['tiny-grid-tree__node-btn', { is__active: isActive }]
-      })
+      const { selectNode } = useCanvas().canvasApi.value
+      selectNode(row.id, 'clickTree')
+    }
+
+    const getIconName = (row) => {
+      const iconName = getMaterial(row.rawData.componentName).icon || 'plugin-icon-page'
+      return iconName.toLowerCase()
+    }
 
     return {
       panelFixed,
-      checkElement,
-      mouseover,
-      mouseleave,
+      eyeOpen,
       showNode,
       state,
-      getIcon,
-      rowDropMove,
-      gridRef,
-      toggleTree,
-      getClassName,
       PLUGIN_NAME,
-      renderIconFn
+      pageState,
+      getIconName,
+      handleClickRow,
+      handleMouseEnterRow,
+      disallowDrop,
+      handleDrop
     }
   }
 }
@@ -304,59 +229,37 @@ export default {
 .outlinebox {
   height: 100%;
   overflow: hidden;
-  .tree-wrap {
-    height: calc(100% - 38px);
-    overflow-y: scroll;
-    padding-top: 12px;
-    border-top: 1px solid var(--te-tree-border-color);
-
-    .tree-handle {
-      font-size: var(--te-base-font-size-2);
-      svg {
-        fill: var(--te-tree-icon-color);
-      }
-    }
+}
+.outline-tree {
+  flex: 1;
+  overflow: auto;
+  .row-label {
+    flex: 1;
+    font-size: var(--te-base-font-size-base);
+    line-height: 20px;
   }
-  :deep(.tiny-grid) {
-    background-color: unset;
-    .tree-box {
-      display: flex;
-      width: 200px;
-      justify-content: space-between;
-    }
-
-    .tiny-grid-tree-wrapper {
-      margin-right: 8px;
-
-      .tiny-grid-tree__node-btn {
-        width: 14px;
-        height: 14px;
-        margin-bottom: 2px;
-      }
+  svg {
+    color: var(--te-common-icon-secondary);
+    flex-shrink: 0;
+    &:hover {
+      color: var(--te-common-icon-hover);
     }
   }
-
-  :deep(.tiny-grid-body__row.nav-tree .tiny-grid-cell) {
-    line-height: inherit;
+  svg.icon-eye {
+    visibility: hidden;
   }
-  :deep(.high-light-node) {
-    background: var(--te-tree-bg-color-active) !important;
-
-    :deep(.eyeOpen) {
-      display: block !important;
-    }
+  .tree-row:hover svg.icon-eye {
+    visibility: unset;
   }
-  :deep(.tiny-grid .tiny-grid__body-wrapper .tiny-grid-body__column) {
-    color: var(--te-tree-text-color);
-    padding: 0 12px;
-    height: 24px !important;
-    line-height: 24px;
-    .tree-content {
-      font-size: 12px;
-    }
-    .node-isblock {
-      color: var(--te-tree-block-text-color);
-    }
+  .row-content {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+  .node-isblock {
+    color: var(--te-tree-block-text-color);
   }
 }
 </style>