拖放 (Drag & Drop)

在构建节点流程编辑器时，一个常见的需求是将侧边栏中的节点拖放到画布中。 在 Flow 中，我们可以直接通过原生的 HTML5 Drag and Drop API 和我们暴露的 screenToCanvas 方法来实现这一功能。

基础拖放示例

您可以在左侧的侧边栏中拖拽不同类型的块，并将其放置到右侧的画布内。

拖拽下方节点:

输入节点

默认节点

输出节点

现有节点

基础拖放

API 概述

拖放与 HTML Native API 完全脱钩，核心依赖的是坐标系转换。因为屏幕坐标与视图内的画布坐标包含由无极缩放和平移带来的增减量是不同的：

方法出口	说明	签名
screenToCanvas(x, y)	传入相对 Flow 容器的坐标 (x, y)，返回画布内部坐标。需先将 event.clientX/clientY 减去容器 getBoundingClientRect() 的 left/top。	(x: number, y: number) => { x: number, y: number }

const onDrop = (event: DragEvent) => {
  const flowInstance = flowRef.value
  if (!flowInstance) return
  const el = (flowInstance as any).$el
  const rect = el?.getBoundingClientRect()
  if (!rect) return
  const dropPosition = flowInstance.screenToCanvas(
    event.clientX - rect.left,
    event.clientY - rect.top
  )
  // 将 dropPosition 设置为新节点的 position
}