Atlassian开源最强“实用”前端拖拽组件:性能和兼容性俱佳、支持跨窗口拖动、适用于任何前端框架
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,可交互时间。该指标主要用于测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需要的时间。
Pragmaticdrag and drop 正式开源仅两周,目前已在 GitHub 拿到了 3.5k+ star。
详情查看
https://github.com/atlassian/pragmatic-drag-and-drop
References
https://www.youtube.com/watch?v=5SQkOyzZLHM
https://atlassian.design/components/pragmatic-drag-and-drop/about
最后插播一条广告:长按识别二维码,欢迎报名参加 4.20 武汉源创会!
热门文章
最新评论
推荐文章
作者最新文章
你可能感兴趣的文章
Copyright Disclaimer: The copyright of contents (including texts, images, videos and audios) posted above belong to the User who shared or the third-party website which the User shared from. If you found your copyright have been infringed, please send a DMCA takedown notice to [email protected]. For more detail of the source, please click on the button "Read Original Post" below. For other communications, please send to [email protected].
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。
版权声明:以上内容为用户推荐收藏至CareerEngine平台,其内容(含文字、图片、视频、音频等)及知识版权均属用户或用户转发自的第三方网站,如涉嫌侵权,请通知[email protected]进行信息删除。如需查看信息来源,请点击“查看原文”。如需洽谈其它事宜,请联系[email protected]。