vxe-tree 樹組件拖拽排序功能的使用教程，通過 drag 啓用行拖拽排序功能，支持同層級、跨層級、拖拽到子級非常強大的拖拽功能等

官網：https://vxeui.com
github：https://github.com/x-extends/vxe-pc-ui
gitee：https://gitee.com/x-extends/vxe-pc-ui

同層級拖拽

通過 drag-config.isPeerDrag 啓用同層級拖拽

<template>
  <div>
    <vxe-tree v-bind="treeOptions"></vxe-tree>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const treeOptions = reactive({
  transform: true,
  drag: true,
  dragConfig: {
    isPeerDrag: true
  },
  data: [
    { title: '節點2', id: '2', parentId: null },
    { title: '節點3', id: '3', parentId: null },
    { title: '節點3-1', id: '31', parentId: '3' },
    { title: '節點3-2', id: '32', parentId: '3' },
    { title: '節點3-2-1', id: '321', parentId: '32' },
    { title: '節點3-2-2', id: '322', parentId: '32' },
    { title: '節點3-3', id: '33', parentId: '3' },
    { title: '節點3-3-1', id: '331', parentId: '33' },
    { title: '節點3-3-2', id: '332', parentId: '33' },
    { title: '節點3-3-3', id: '333', parentId: '33' },
    { title: '節點3-4', id: '34', parentId: '3' },
    { title: '節點4', id: '4', parentId: null },
    { title: '節點4-1', id: '41', parentId: '4' },
    { title: '節點4-1-1', id: '411', parentId: '42' },
    { title: '節點4-1-2', id: '412', parentId: '42' },
    { title: '節點4-2', id: '42', parentId: '4' },
    { title: '節點4-3', id: '43', parentId: '4' },
    { title: '節點4-3-1', id: '431', parentId: '43' },
    { title: '節點4-3-2', id: '432', parentId: '43' },
    { title: '節點5', id: '5', parentId: null }
  ]
})
</script>

跨層級拖拽

通過 drag-config.isCrossDrag 啓用跨層級拖拽

<template>
  <div>
    <vxe-tree v-bind="treeOptions"></vxe-tree>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const treeOptions = reactive({
  transform: true,
  drag: true,
  dragConfig: {
    isCrossDrag: true
  },
  data: [
    { title: '節點2', id: '2', parentId: null },
    { title: '節點3', id: '3', parentId: null },
    { title: '節點3-1', id: '31', parentId: '3' },
    { title: '節點3-2', id: '32', parentId: '3' },
    { title: '節點3-2-1', id: '321', parentId: '32' },
    { title: '節點3-2-2', id: '322', parentId: '32' },
    { title: '節點3-3', id: '33', parentId: '3' },
    { title: '節點3-3-1', id: '331', parentId: '33' },
    { title: '節點3-3-2', id: '332', parentId: '33' },
    { title: '節點3-3-3', id: '333', parentId: '33' },
    { title: '節點3-4', id: '34', parentId: '3' },
    { title: '節點4', id: '4', parentId: null },
    { title: '節點4-1', id: '41', parentId: '4' },
    { title: '節點4-1-1', id: '411', parentId: '42' },
    { title: '節點4-1-2', id: '412', parentId: '42' },
    { title: '節點4-2', id: '42', parentId: '4' },
    { title: '節點4-3', id: '43', parentId: '4' },
    { title: '節點4-3-1', id: '431', parentId: '43' },
    { title: '節點4-3-2', id: '432', parentId: '43' },
    { title: '節點5', id: '5', parentId: null }
  ]
})
</script>

https://gitee.com/x-extends/vxe-pc-ui