React Flow 拖拽功能实现指南

本文介绍 React Flow 中实现拖拽功能的三种方法：HTML Drag and Drop API、Pointer Events 以及 Neodrag 库。拖拽功能是节点式工作流编辑器中非常常见的交互模式。

概述

在 React Flow 中实现拖拽功能时，我们需要一个自定义的 Sidebar 组件，用户可以从侧边栏拖拽元素到画布中创建新节点。React Flow 本身并不内置侧边栏到外部的拖拽行为，但可以通过原生 API 或第三方库来实现。

方法一：HTML Drag and Drop API

HTML Drag and Drop API 是所有主流浏览器都支持的原生 API，使用简单直接。

核心实现

DnDContext.jsx - 创建拖拽上下文：

jsx

import { createContext, useContext, useState } from 'react';

const DnDContext = createContext([null, (_) => {}]);

export const DnDProvider = ({ children }) => {
  const [type, setType] = useState(null);
  return (
    <DnDContext.Provider value={[type, setType]}>
      {children}
    </DnDContext.Provider>
  );
}

export default DnDContext;

export const useDnD = () => {
  return useContext(DnDContext);
}

App.jsx - 主应用组件：

jsx

import React, { useRef, useCallback } from 'react';
import {
  ReactFlow,
  ReactFlowProvider,
  addEdge,
  useNodesState,
  useEdgesState,
  Controls,
  useReactFlow,
  Background,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import Sidebar from './Sidebar';
import { DnDProvider, useDnD } from './DnDContext';

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'input node' },
    position: { x: 250, y: 5 },
  },
];

let id = 0;
const getId = () => `dndnode_${id++}`;

const DnDFlow = () => {
  const reactFlowWrapper = useRef(null);
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
  const { screenToFlowPosition } = useReactFlow();
  const [type] = useDnD();

  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    []
  );

  const onDragOver = useCallback((event) => {
    event.preventDefault();
    event.dataTransfer.dropEffect = 'move';
  }, []);

  const onDrop = useCallback(
    (event) => {
      event.preventDefault();
      if (!type) {
        return;
      }

      // 使用 screenToFlowPosition 转换坐标
      const position = screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });

      const newNode = {
        id: getId(),
        type,
        position,
        data: { label: `${type} node` },
      };

      setNodes((nds) => nds.concat(newNode));
    },
    [screenToFlowPosition, type]
  );

  return (
    <div className="dndflow">
      <div className="reactflow-wrapper" ref={reactFlowWrapper}>
        <ReactFlow
          nodes={nodes}
          edges={edges}
          onNodesChange={onNodesChange}
          onEdgesChange={onEdgesChange}
          onConnect={onConnect}
          onDrop={onDrop}
          onDragOver={onDragOver}
          fitView
        >
          <Controls />
          <Background />
        </ReactFlow>
      </div>
      <Sidebar />
    </div>
  );
};

export default () => (
  <ReactFlowProvider>
    <DnDProvider>
      <DnDFlow />
    </DnDProvider>
  </ReactFlowProvider>
);

注意事项

注意：HTML Drag and Drop API 在触摸设备上支持不完善。如果需要支持移动端，建议使用 Pointer Events 方案。

方法二：Pointer Events

Pointer Events API 是现代浏览器支持的 API，相比 HTML Drag and Drop API 实现稍微复杂，但可以确保在所有设备（鼠标和触摸）上行为一致。

优势

跨平台兼容（鼠标 + 触摸设备）
更精细的事件控制
统一的输入处理方式

方法三：使用 Neodrag 库

Neodrag 是一个提供简单易用拖拽 API 的库。在实际项目中，你可能希望使用 Neodrag 来处理拖拽行为，因为它跨平台兼容，同时支持鼠标和触摸设备。

为什么选择 Neodrag

简单易用的 API
跨平台兼容
轻量级
活跃的社区维护

关键技术点

坐标转换

在实现拖拽功能时，关键的一步是将屏幕坐标转换为 React Flow 的画布坐标：

javascript

const { screenToFlowPosition } = useReactFlow();

const position = screenToFlowPosition({
  x: event.clientX,
  y: event.clientY,
});

screenToFlowPosition 方法会自动处理画布的缩放和平移，无需手动计算边界偏移。

节点创建

创建新节点时，需要为节点分配唯一 ID：