当前位置:首页 > 技术分析 > 正文内容

Atlassian开源拖拽组件:强性能、广兼容,跨窗拖动,适配全框架

ruisui882个月前 (03-05)技术分析10

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

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2517.html

分享给朋友:

“Atlassian开源拖拽组件:强性能、广兼容,跨窗拖动,适配全框架” 的相关文章

vue项目-父页面数据变化使子页面更新的几种情况

当操作页面时候,特别是增删改操作之后,数据会有所改变,这个时候我们希望组件中的数据要和最新数据一致,就需要重新更新渲染。以下是针对几种不同情况下方式:一.子页面调用接口后重新渲染1.使用ref方式父组件中用ref=“xxx” 来声明子组件,然后通过在父组件值改变的地方来调用子组件中的方法this.$...

Git 分支管理策略与工作流程

(预警:因为详细,所以行文有些长,新手边看边操作效果出乎你的预料)团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。看完这篇文章后,涉及GIT的工作中就会减少因为规范问题导致工作出错,当然如果你现在暂时还未有合...

gitlab简单搭建与应用

一、gitlab1、简介GitLab是利用Ruby on Rails一个开源的版本管理系统,实现一个自托管的Git项目仓库,可通过Web界面进行访问公开的或者私人项目。与Github类似,GitLab能够浏览源代码,管理缺陷和注释。可以管理团队对仓库的访问,它非常易于浏览提交过的版本并提供一个文件历...

国产操作系统上Vim的详解03--安装和使用插件 | 统信 | 麒麟 | 中科方德

原文链接:国产操作系统上Vim的详解03--使用Vundle插件管理器来安装和使用插件 | 统信 | 麒麟 | 中科方德Hello,大家好啊!今天给大家带来一篇在国产操作系统上使用Vundle插件管理器来安装和使用Vim插件的详解文章。Vundle是Vim的一款强大的插件管理器,可以帮助我们轻松地安...

深度解析!AI智能体在To B领域应用,汽车售后服务落地全攻略

在汽车售后服务领域,AI智能体的应用正带来一场效率和专业度的革命。本文深度解析了一个AI智能体在To B领域的实际应用案例,介绍了AI智能体如何通过提升服务顾问和维修技师的专业度及维修效率,优化汽车售后服务流程。上周我分享了AI智能体+AI小程序To C的AI应用场景《1000%增长!我仅用一个小时...

2024年,不断突破的一年

迈凯伦F1车队不久前拿下了2024年度总冠军,距离上一次还是二十几年前。在此期间,另一领域内,一个充满革新活力的腕表品牌——RICHARD MILLE理查米尔,正不断发展,与F1运动、帆船、古董车展等领域,共享着对速度与极限的无尽向往。RICHARD MILLE的发展与F1车手们在赛道上的卓越表现交...