react拖拉流程图_react 拖拽组件 自由拖拽,垂直水平拖拽

import React, { useEffect, useState } from "react"

import { Tree, message } from 'antd'; //导入antd 的Tree组件

export default function App() {

const [data, setData] = useState([])

useEffect(() => {

if (data.length === 0) {

//初始化数据

setData([{ title: "组1", key: 1 },

{ title: "组2", key: 2, children: [{ title: "子组1", key: 6 }, { title: "子组2", key: 7 }, { title: "子组3", key: 9 }] },

{ title: "组3", key: 3 },

{ title: "组4", key: 4 }])

}

}, [data])

//完成拖拽

const onDrop = info => {

/**

* 这里是判断 拖拽之后的动作是否允许存在跨级拖拽交换位置等等...

* 若需要判断可以取消注释

*/

// let nodePosArr = info.node.pos.split('-')

// let dropPosArr = info.dragNode.pos.split('-')

// if (dropPosArr.length === nodePosArr.length && nodePosArr[1] !== dropPosArr[1]) return message.error("不可拖入其他类别")

// if (nodePosArr.length !== dropPosArr.length) return message.error("列表禁止跨级拖拽")

// if (!info.dropToGap) return message.error("同级列表只能互换顺序")

const dropKey