当前位置：首页 > news >正文

es-drager-blog

news 2025/8/11 8:28:56

用 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>)
}

添加旋转与缩放

<DragerclassName="w-32 h-32 bg-blue-500"rotatablescalableminScale={0.5}maxScale={2}
>Try all features!
</Drager>

添加连接功能

<Dragerid="node-1"className="w-32 h-32 bg-blue-500"connectableonConnect={(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	最大缩放比例