Atlassian 开源最强“实用”前端拖拽组件:性能和兼容性俱佳、支持跨窗口拖动、适用于任何前端框架

2024年 4月 25日 49.8k 0

​Pragmatic drag and drop 是一款前端拖拽组件,由知名软件开发公司 Atlassian 开源。

正如名字中的 Pragmatic(“实用”)所言,该组件支持许多拖拽场景,十分注重性能,并且通过使用浏览器强大而灵活的内置拖拽功能变得安全而简单。

目前 Atlassian 公司旗下核心产品 Trello、Jira 和 Confluence 等均使用了 Pragmatic drag and drop。

在 Pragmatic drag and drop 之前,该组件作者 Alex Reardon 还打造了另一款流行的 React 开源拖拽组件 react-beautiful-dnd。

与之相比,Pragmatic drag and drop支持了更多的拖拽场景:

  • 列表

  • 面板

  • 表格

  • Grids

  • Drawing

  • Resizing

下图展示了 Pragmatic Drag and Drop 在不同场景的运行效果:

Pragmatic drag and drop 还支持在任何前端框架(如 React、Svelte、Vue、Angular)中使用,不受特定技术栈的限制。

在不同框架中使用的写法如下:

  • React

     

  • Svelte

     

  • JS

     

对比其他同类型的开源拖拽组件,Pragmaticdrag and drop 核心包经过压缩后更加轻量,仅 4.7kb。

性能方面,对比以下同类型开源框架:

  • react-beautiful-dnd

  • react-dnd

  • dnd-kit

Pragmaticdrag and drop 的 TTI 指标可谓是“遥遥领先”。

TTI: Time to Interactive,可交互时间。该指标主要用于测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需要的时间。

参考链接

https://www.youtube.com/watch?v=5SQkOyzZLHM

https://atlassian.design/components/pragmatic-drag-and-drop/about

https://mp.weixin.qq.com/

相关文章

塑造我成为 CTO 之路的“秘诀”
“人工智能教母”的公司估值达 10 亿美金
教授吐槽:985 高校成高级蓝翔!研究生基本废了,只为房子、票子……
Windows 蓝屏中断提醒开发者:Rust 比 C/C++ 更好
Claude 3.5 Sonnet 在伽利略幻觉指数中名列前茅
上海新增 11 款已完成登记生成式 AI 服务

发布评论