前端常用拖拽组件库(vue3、react、vue2)

文章目录

横向对比表

库名称 框架支持 核心功能 学习曲线 社区活跃度
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 和事件回调。
  • 网格拖拽缩放
  • 拖拽编辑器
  • 轻量级,性能优秀。

资源


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

资源

📌 核心定位

专为 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,支持动态调整布局和响应式设计。

特点

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

资源


Fluid DnD

简介

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

特点

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

资源


其他推荐

  1. SortableJS

  2. React DnD

  3. 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. 测试性能,确保拖拽操作不会影响页面流畅度。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
甜瓜看代码3 小时前
1.
react.js·node.js·angular.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app