拖动句柄

你可以通过指定一个将作为dragHandle的类，将拖动限制在节点的特定部分。要防止拖动句柄中的特定元素触发拖动，你可以在这些元素上使用nodrag类名。

🌐 You can restrict dragging to a specific part of a node, by specifying a class that will act as a dragHandle. To prevent specific elements within a drag handle from triggering a drag, you can use the nodrag class name on those elements.


import React from 'react';
import {
  ReactFlow,
  useNodesState,
  useEdgesState,
  Background,
} from '@xyflow/react';
 
import DragHandleNode from './DragHandleNode';
import '@xyflow/react/dist/style.css';
 
const nodeTypes = {
  dragHandleNode: DragHandleNode,
};
 
const initialNodes = [
  {
    id: '2',
    type: 'dragHandleNode',
 
    // Specify the custom class acting as a drag handle
    dragHandle: '.drag-handle__custom',
    position: { x: 200, y: 200 },
  },
];
 
const DragHandleFlow = () => {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      nodeTypes={nodeTypes}
      fitView
    >
      <Background />
    </ReactFlow>
  );
};
 
export default DragHandleFlow;