前端常用拖拽组件库（vue3、react、vue2）

文章目录

• 横向对比表
• [ES Drager](#ES Drager)
• • [Drager API](#Drager API)
  • • [Drager 属性](#Drager 属性)
    • [Drager 事件](#Drager 事件)
    • [Drager 插槽](#Drager 插槽)
• vue-draggable-plus
• Grid-Layout-Plus
• [Fluid DnD](#Fluid DnD)
• 其他推荐
• 如何选择？
• 注意事项

横向对比表

库名称	框架支持	核心功能	学习曲线	社区活跃度
ES Drager	Vue 3	高级图形操作	中	★★★★☆
vue-draggable-plus	Vue 3	列表拖拽克隆排序	低	★★★☆☆
Grid-Layout-Plus	Vue 3/React	响应式网格	高	★★★★☆
Fluid DnD	跨框架	动画交互	中	★★★☆☆
vue-draggable	vue2	列表拖拽克隆排序	中	★☆☆ ☆☆
vue-grid-layout	vue2	响应式网格	中	★☆☆ ☆☆

---

ES Drager

🌈 简介 ：

ES Drager 是一个轻量级的拖拽组件库，支持 Vue 3，提供基础的拖拽功能和高度的自定义能力。

特点：

• 支持拖拽、缩放、旋转等操作。
• 提供丰富的 API 和事件回调。
• 网格拖拽缩放
• 拖拽编辑器
• 轻量级，性能优秀。

资源：

• 官网：https://vangleer.github.io/es-drager/#/basic
• GitHub：https://github.com/vangleer/es-drager

---

ES Drager
Draggable	Resizable	Rotatable	skewable

Drager API

Drager 属性

属性名	说明	类型	默认
tag	component组件的is属性	string	div
type	类型，rect, text, image	string	rect
width	宽度	number	100
height	高度	number	100
left	横坐标偏移	number	0
top	纵坐标偏移	number	0
angle	旋转角度	number	0
skew	倾斜角度	Array	0, 0
color	颜色	string	#3a7afe
resizable	是否可缩放	boolean	true
rotatable	是否可旋转	boolean	-
skewable v1.3.0	是否可倾斜	boolean	-
boundary	是否判断边界(最近定位父节点，考虑性能谨慎使用。只支持移动，缩放在v1.3后不支持)	boolean	-
disabled	是否禁用	boolean	-
minWidth	最小宽度	number	-
minHeight	最小高度	number	-
maxWidth	最大宽度	number	-
maxHeight	最大高度	number	-
selected	控制是否选中	boolean	-
checkCollision	是否开启碰撞检测	boolean	-
snapToGrid	开启网格	boolean	-
gridX	网格X大小	number	50
gridY	网格Y大小	number	50
snap	开启吸附	boolean	-
snapThreshold	吸附阈值	number	10
markline	辅助线(可自定义)	booleanFunction	-
extraLines	添加除了es-drager元素以外的对齐线，例如添加中心点对齐(可参考)	Function
scaleRatio	缩放比	number	1
disabledKeyEvent	禁用方向键移动	boolean	-
border	是否显示边框	boolean	true
aspectRatio	宽高缩放比	number	-
equalProportion	宽高等比缩放(该属性和aspectRatio互斥，同时使用会存在问题)	boolean	-
resizeList	显示的缩放handle列表，top, bottom, left, right, top-left, top-right, bottom-left, bottom-right	string\[]	-

Drager 事件

事件名	说明	类型
change	位置、大小改变	Function(dragData) => void
drag	拖拽中	Function(dragData) => void
drag-start	拖拽开始	Function(dragData) => void
drag-end	拖拽结束	Function(dragData) => void
resize	缩放中	Function(dragData) => void
resize-start	缩放开始	Function(dragData) => void
resize-end	缩放结束	Function(dragData) => void
rotate	旋转中	Function(dragData) => void
rotate-start	旋转开始	Function(dragData) => void
rotate-end	旋转结束	Function(dragData) => void
skew	倾斜中	Function(dragData) => void
skew-start	倾斜开始	Function(dragData) => void
skew-end	倾斜结束	Function(dragData) => void
focus	获取焦点/选中	Function(selected) => void
blur	失去焦点/非选中	Function(selected) => void

• dragData 类型

export type DragData = {
  width: number
  height: number
  left: number
  top: number
  angle: number
  skew: number[],
}

Drager 插槽

插槽名	说明
default	自定义默认内容
resize	缩放handle
rotate	旋转handle
skew	倾斜handle

---

vue-draggable-plus

资源：

• 官网：https://vue-draggable-plus.pages.dev/
• GitHub：https://github.com/vue-draggable-plus

📌 核心定位 ：

专为 Vue 3 设计的列表拖拽排序解决方案，基于 Sortable.js 深度优化，适用于列表拖拽排序等场景。

特点：

• 支持列表拖拽排序。
• 兼容 Vue 3 的 Composition API。
• 配置灵活，易于集成。

🎯 典型场景：

• 任务看板（Kanban）
• 表格行排序
• 嵌套列表重组

🛠️ 技术特性：

// 示例：基础用法
import { Draggable } from 'vue-draggable-plus'
<Draggable 
  v-model="list"
  animation="150"
  handle=".handle"
  @end="onDragEnd"
/>

---

Grid-Layout-Plus

简介 ：

Grid-Layout-Plus 是一个强大的网格布局拖拽库，适用于 Vue 3，支持动态调整布局和响应式设计。

特点：

• 支持网格拖拽和动态调整布局。
• 提供丰富的布局配置选项。
• 响应式设计，适配不同屏幕尺寸。

资源：

• 官网：https://grid-layout-plus.netlify.app/zh/
• GitHub：https://github.com/qmhc/grid-layout-plus

---

Fluid DnD

简介 ：

Fluid DnD 是一个流畅的拖拽库，支持 Vue 3，专注于提供自然的拖拽体验和动画效果。

特点：

• 提供流畅的拖拽动画。
• 支持多种拖拽场景（列表、网格等）。
• 易于配置和使用。

资源：

• 官网：https://fluid-dnd.netlify.app/vue/introduction/introduction/
• GitHub：https://github.com/fluid-dnd

---

其他推荐

1. SortableJS

   • 官网：https://sortablejs.github.io/Sortable/
   • GitHub：https://github.com/SortableJS/Sortable
   • 适用于原生 JavaScript 和多种框架的拖拽排序库。

2. React DnD

   • 官网：https://react-dnd.github.io/react-dnd/
   • GitHub：https://github.com/react-dnd/react-dnd
   • 适用于 React 的拖拽库，功能强大且灵活。

3. Draggable

   • 官网：https://shopify.github.io/draggable/
   • GitHub：https://github.com/Shopify/draggable
   • 提供多种拖拽交互模式，适合复杂场景。

---

如何选择？

• Vue 3 项目：推荐 ES Drager、vue-draggable-plus 或 Grid-Layout-Plus。
• Vue 2 项目：推荐 vue-draggable、vue-grid-layout 。
• React 项目：推荐 React DnD。
• 原生 JavaScript 项目：推荐 SortableJS 或 Draggable。
• 需要网格布局：优先选择 Grid-Layout-Plus。
• 需要流畅动画：优先选择 Fluid DnD。

---

注意事项

1. 根据项目需求选择合适的库，避免过度依赖。
2. 注意库的维护状态和社区支持情况。
3. 测试性能，确保拖拽操作不会影响页面流畅度。

---