前端常用拖拽组件库（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	辅助线(可自定义)	[boolean][Function]	-
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. 测试性能，确保拖拽操作不会影响页面流畅度。

---