用 ES Drager 打造你的交互式拖拽组件 —— React 开发者必备神器

原创已于 2025-08-12 13:02:14 修改 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#拖拽 #组件库 #React #前端框架

于 2025-08-10 16:35:29 首次发布

用 ES Drager 打造你的交互式拖拽组件 —— React 开发者必备神器

如果你正在寻找一个轻量、灵活、功能齐全的拖拽组件库，用于构建可拖拽、旋转、缩放、调整尺寸甚至带有连接功能的 React 应用，那么 ES Drager 会是你的不二之选。

📌 什么是 ES Drager？

ES Drager 是一个轻量级 React 组件，专为构建交互式 UI 元素而设计。它不仅支持拖拽，还提供旋转、缩放、调整尺寸、倾斜，以及节点间连线等高级功能，让你可以轻松实现：

流程图编辑器
可视化页面搭建器
设计工具
节点连接图
拖拽式布局系统
互动游戏/应用 UI

一句话：你想要的交互，这个库都能帮你搞定。

🚀 安装与快速开始

安装方式非常简单，支持 npm、yarn、pnpm：

npm install @es-space/es-drager-react
# 或
yarn add @es-space/es-drager-react
# 或
pnpm add @es-space/es-drager-react

确保你的 React 版本 ≥ 18：

{
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

🛠️ 快速上手

只需几行代码，就能在页面中创建一个可拖拽的元素：

import { Drager } from '@es-space/es-drager-react'

function App() {
  return (
    <Drager className="w-32 h-32 bg-blue-500">
      Drag me!
    </Drager>
  )
}

添加旋转与缩放

<Drager
  className="w-32 h-32 bg-blue-500"
  rotatable
  scalable
  minScale={0.5}
  maxScale={2}
>
  Try all features!
</Drager>

添加连接功能

<Drager
  id="node-1"
  className="w-32 h-32 bg-blue-500"
  connectable
  onConnect={(sourceId, sourceAnchor, targetId, targetAnchor) => {
    console.log('Connected:', { sourceId, sourceAnchor, targetId, targetAnchor })
  }}
>
  Node 1
</Drager>

💡 核心功能一览

1. 拖拽（Dragging）

默认支持元素拖动
可限制在指定范围内移动（limit 属性）
提供 onDragStart、onDrag、onDragEnd 事件

2. 旋转（Rotation）

设置 rotatable 开启
可通过 rotation 指定初始角度
提供 onRotate(angle) 事件回调

3. 缩放（Scaling）

scalable 启用缩放
minScale / maxScale 控制缩放范围
提供 onScale(scale) 事件

4. 调整尺寸（Resize）

resizable 启用尺寸调整
支持保持纵横比或自由调整

5. 连接（Connections）

connectable 开启节点锚点
四个默认锚点（top / right / bottom / left）
自动绘制贝塞尔曲线
提供 onConnect 事件

📜 主要 Props & 事件

常用 Props

Prop	类型	说明
`rotatable`	boolean	是否可旋转
`scalable`	boolean	是否可缩放
`resizable`	boolean	是否可调整尺寸
`connectable`	boolean	是否可连接
`limit`	object	移动范围限制
`minScale`	number	最小缩放比例
`maxScale`	number	最大缩放比例