如何实现节点拖拽入画布XFlow useDnd简单快速教程附完整代码【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow想在 React 画布中实现节点拖拽吗XFlow 提供的useDndHook 可以在几行代码内搞定从侧边栏拖一个节点到画布这个高频交互。本教程带你用最少的代码、最快的速度基于 XFlowReact 版 X6 图编辑组件完成节点拖拽入画布的完整功能并附可直接运行的完整代码。一、XFlow 节点拖拽的原理是什么在动手之前先理解 XFlow 的拖拽机制帮你少走弯路环节说明useDnd内部封装了 X6 的 Dnd 插件自动绑定当前画布实例startDragHook 返回的唯一方法接收节点配置 鼠标事件两个参数拖影节点拖拽过程中在页面上生成的临时拖影由 XFlow 自动克隆管理落点节点松开鼠标后XFlow 自动把节点克隆并添加到画布对应坐标也就是说你只需要定义节点长什么样剩下的拖拽逻辑交给useDnd。源码位于 useDnd.ts核心仅 40 行非常易读。二、快速上手3 步实现节点拖拽入画布第 1 步安装 XFlow 并搭建画布npm install antv/xflow --save用XFlow作为根容器内部放置画布组件XFlowGraph完整用法见 index.tsximport { XFlow, XFlowGraph, Grid, History, Clipboard } from antv/xflow; const Page () ( XFlow XFlowGraph zoomable pannable centerView fitView / Grid typemesh options{{ color: #ccc, thickness: 1 }} / History / Clipboard / /XFlow );⚠️ 关键点useDnd必须在XFlow内部调用因为它依赖 XFlow 提供的画布实例上下文。第 2 步注册自定义流程图节点先用Graph.registerNode定义节点样式并配置可连线的 ports磁吸点。示例见 node.tsximport { Graph } from antv/xflow; const FLOW_NODE flow-node; Graph.registerNode(FLOW_NODE, { inherit: rect, width: 100, height: 60, attrs: { body: { rx: 5, ry: 5, stroke: rgb(74, 123, 203), fill: rgb(74, 123, 203), }, text: { fill: #fff, fontSize: 14 }, }, });第 3 步调用 useDnd鼠标按下即触发拖拽在侧边栏组件里调用useDnd()拿到startDrag然后把它绑定到任意元素的onMouseDown事件即可import { useDnd } from antv/xflow; const Dnd () { const { startDrag } useDnd(); const handleMouseDown ( e: React.MouseEventElement, MouseEvent, label: string, ) { startDrag( { id: ${Date.now()}, shape: FLOW_NODE, // 第 2 步注册的节点 label, width: 100, height: 60, }, e, ); }; return ( div classNamednd-panel div onMouseDown{(e) handleMouseDown(e, 开始节点)}开始节点/div /div ); };startDrag的完整签名与实现见 useDnd.ts 第 26-34 行第一个参数是节点配置NodeOptions第二个参数是原生鼠标事件。三、完整可运行代码下面是可直接运行的最小完整示例结构参考官方示例页 flow/index.tsx 和 flow/dnd.tsx// page.tsx import React from react; import { XFlow, XFlowGraph, Grid, History, useDnd, Graph } from antv/xflow; const FLOW_NODE flow-node; Graph.registerNode(FLOW_NODE, { inherit: rect, width: 100, height: 60, attrs: { body: { rx: 5, ry: 5, stroke: #4A7BCB, fill: #4A7BCB }, text: { fill: #fff, fontSize: 14 }, }, }); // 侧边栏节点工厂面板 const DndPanel () { const { startDrag } useDnd(); return ( div style{{ width: 160, padding: 12, borderRight: 1px solid #eee }} h4节点面板/h4 {[开始, 处理, 结束].map((label) ( div key{label} onMouseDown{(e) startDrag( { id: ${label}-${Date.now()}, shape: FLOW_NODE, label, width: 100, height: 60, }, e, ) } style{{ padding: 8px 0, margin: 8px 0, textAlign: center, color: #fff, background: #4A7BCB, borderRadius: 4, cursor: move, }} {label} /div ))} /div ); }; // 页面左侧节点面板 右侧画布 const Page () ( div style{{ display: flex, height: 100vh }} DndPanel / XFlow XFlowGraph centerView zoomable pannable fitView / Grid typemesh options{{ color: #ccc, thickness: 1 }} / History / /XFlow /div ); export default Page;运行后按住左侧节点面板中的任意节点拖动到右侧画布松手节点即落在对应位置 ✅四、进阶给节点配置连线端口ports如果想让拖入的节点可以直接连线只需在节点配置中加上ports磁吸点。官方示例 flow/node.tsx 注册了四边各一个磁吸点const ports { groups: { top: { position: top, attrs: { circle: { r: 4, magnet: true } }, }, bottom: { position: bottom, attrs: { circle: { r: 4, magnet: true } }, }, }, items: [ { id: p1, group: top }, { id: p2, group: bottom }, ], };DAG 场景下还可以按节点类型动态指定端口方向参考 dag/dnd/dnd.tsx每个数据源节点只暴露底口模型节点同时暴露顶口和底口天然形成从上到下的流向。五、常见问题FAQQ1为什么拖拽没反应两个最常见原因①useDnd没有被XFlow包裹② 事件绑到了onClick而不是onMouseDown。拖拽必须从按下鼠标那一刻就开始监听。Q2拖入画布后 ID 重复怎么办startDrag的第一个参数必须提供唯一id。建议用自增计数或Date.now()DAG 示例中用的是递增计数器见 dag/dnd/dnd.tsx 第 119-137 行。Q3想自定义拖影样式或落点校验useDnd支持传入antv/x6-plugin-dnd的其余配置项如validateDrop落点合法性校验、dropTarget等会自动透传给底层 Dnd 插件见 useDnd.ts 第 8-10 行。六、总结useDnd是 XFlow 官方提供的节点拖拽 Hook一行const { startDrag } useDnd()即可接入完整链路只有三步装画布 → 注册节点 → 绑定onMouseDown触发startDrag配合ports磁吸点拖入的节点可以直接连线快速搭出流程图 / DAG 编排界面更多可运行示例都在示例工程中apps/basic/src/pages/flow/ 是经典流程图版本apps/basic/src/pages/dag/ 是数据编排DAG版本值得对照学习。【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何实现节点拖拽入画布？XFlow useDnd简单快速教程（附完整代码）
如何实现节点拖拽入画布XFlow useDnd简单快速教程附完整代码【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow想在 React 画布中实现节点拖拽吗XFlow 提供的useDndHook 可以在几行代码内搞定从侧边栏拖一个节点到画布这个高频交互。本教程带你用最少的代码、最快的速度基于 XFlowReact 版 X6 图编辑组件完成节点拖拽入画布的完整功能并附可直接运行的完整代码。一、XFlow 节点拖拽的原理是什么在动手之前先理解 XFlow 的拖拽机制帮你少走弯路环节说明useDnd内部封装了 X6 的 Dnd 插件自动绑定当前画布实例startDragHook 返回的唯一方法接收节点配置 鼠标事件两个参数拖影节点拖拽过程中在页面上生成的临时拖影由 XFlow 自动克隆管理落点节点松开鼠标后XFlow 自动把节点克隆并添加到画布对应坐标也就是说你只需要定义节点长什么样剩下的拖拽逻辑交给useDnd。源码位于 useDnd.ts核心仅 40 行非常易读。二、快速上手3 步实现节点拖拽入画布第 1 步安装 XFlow 并搭建画布npm install antv/xflow --save用XFlow作为根容器内部放置画布组件XFlowGraph完整用法见 index.tsximport { XFlow, XFlowGraph, Grid, History, Clipboard } from antv/xflow; const Page () ( XFlow XFlowGraph zoomable pannable centerView fitView / Grid typemesh options{{ color: #ccc, thickness: 1 }} / History / Clipboard / /XFlow );⚠️ 关键点useDnd必须在XFlow内部调用因为它依赖 XFlow 提供的画布实例上下文。第 2 步注册自定义流程图节点先用Graph.registerNode定义节点样式并配置可连线的 ports磁吸点。示例见 node.tsximport { Graph } from antv/xflow; const FLOW_NODE flow-node; Graph.registerNode(FLOW_NODE, { inherit: rect, width: 100, height: 60, attrs: { body: { rx: 5, ry: 5, stroke: rgb(74, 123, 203), fill: rgb(74, 123, 203), }, text: { fill: #fff, fontSize: 14 }, }, });第 3 步调用 useDnd鼠标按下即触发拖拽在侧边栏组件里调用useDnd()拿到startDrag然后把它绑定到任意元素的onMouseDown事件即可import { useDnd } from antv/xflow; const Dnd () { const { startDrag } useDnd(); const handleMouseDown ( e: React.MouseEventElement, MouseEvent, label: string, ) { startDrag( { id: ${Date.now()}, shape: FLOW_NODE, // 第 2 步注册的节点 label, width: 100, height: 60, }, e, ); }; return ( div classNamednd-panel div onMouseDown{(e) handleMouseDown(e, 开始节点)}开始节点/div /div ); };startDrag的完整签名与实现见 useDnd.ts 第 26-34 行第一个参数是节点配置NodeOptions第二个参数是原生鼠标事件。三、完整可运行代码下面是可直接运行的最小完整示例结构参考官方示例页 flow/index.tsx 和 flow/dnd.tsx// page.tsx import React from react; import { XFlow, XFlowGraph, Grid, History, useDnd, Graph } from antv/xflow; const FLOW_NODE flow-node; Graph.registerNode(FLOW_NODE, { inherit: rect, width: 100, height: 60, attrs: { body: { rx: 5, ry: 5, stroke: #4A7BCB, fill: #4A7BCB }, text: { fill: #fff, fontSize: 14 }, }, }); // 侧边栏节点工厂面板 const DndPanel () { const { startDrag } useDnd(); return ( div style{{ width: 160, padding: 12, borderRight: 1px solid #eee }} h4节点面板/h4 {[开始, 处理, 结束].map((label) ( div key{label} onMouseDown{(e) startDrag( { id: ${label}-${Date.now()}, shape: FLOW_NODE, label, width: 100, height: 60, }, e, ) } style{{ padding: 8px 0, margin: 8px 0, textAlign: center, color: #fff, background: #4A7BCB, borderRadius: 4, cursor: move, }} {label} /div ))} /div ); }; // 页面左侧节点面板 右侧画布 const Page () ( div style{{ display: flex, height: 100vh }} DndPanel / XFlow XFlowGraph centerView zoomable pannable fitView / Grid typemesh options{{ color: #ccc, thickness: 1 }} / History / /XFlow /div ); export default Page;运行后按住左侧节点面板中的任意节点拖动到右侧画布松手节点即落在对应位置 ✅四、进阶给节点配置连线端口ports如果想让拖入的节点可以直接连线只需在节点配置中加上ports磁吸点。官方示例 flow/node.tsx 注册了四边各一个磁吸点const ports { groups: { top: { position: top, attrs: { circle: { r: 4, magnet: true } }, }, bottom: { position: bottom, attrs: { circle: { r: 4, magnet: true } }, }, }, items: [ { id: p1, group: top }, { id: p2, group: bottom }, ], };DAG 场景下还可以按节点类型动态指定端口方向参考 dag/dnd/dnd.tsx每个数据源节点只暴露底口模型节点同时暴露顶口和底口天然形成从上到下的流向。五、常见问题FAQQ1为什么拖拽没反应两个最常见原因①useDnd没有被XFlow包裹② 事件绑到了onClick而不是onMouseDown。拖拽必须从按下鼠标那一刻就开始监听。Q2拖入画布后 ID 重复怎么办startDrag的第一个参数必须提供唯一id。建议用自增计数或Date.now()DAG 示例中用的是递增计数器见 dag/dnd/dnd.tsx 第 119-137 行。Q3想自定义拖影样式或落点校验useDnd支持传入antv/x6-plugin-dnd的其余配置项如validateDrop落点合法性校验、dropTarget等会自动透传给底层 Dnd 插件见 useDnd.ts 第 8-10 行。六、总结useDnd是 XFlow 官方提供的节点拖拽 Hook一行const { startDrag } useDnd()即可接入完整链路只有三步装画布 → 注册节点 → 绑定onMouseDown触发startDrag配合ports磁吸点拖入的节点可以直接连线快速搭出流程图 / DAG 编排界面更多可运行示例都在示例工程中apps/basic/src/pages/flow/ 是经典流程图版本apps/basic/src/pages/dag/ 是数据编排DAG版本值得对照学习。【免费下载链接】XFlowReact component for building interactive diagrams.项目地址: https://gitcode.com/gh_mirrors/xf/XFlow创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考