前端常用拖拽组件库（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 类型

javascript 复制代码

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）
表格行排序
嵌套列表重组

🛠️ 技术特性：

javascript 复制代码

// 示例：基础用法
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

其他推荐

SortableJS
- 官网：https://sortablejs.github.io/Sortable/
- GitHub：https://github.com/SortableJS/Sortable
- 适用于原生 JavaScript 和多种框架的拖拽排序库。
React DnD
- 官网：https://react-dnd.github.io/react-dnd/
- GitHub：https://github.com/react-dnd/react-dnd
- 适用于 React 的拖拽库，功能强大且灵活。
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。

注意事项

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