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

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

ruisui884个月前 (03-05)技术分析16

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开源拖拽组件:强性能、广兼容,跨窗拖动,适配全框架” 的相关文章

vue3中父子组件之间传值的详解

首先我们回顾一下vue2中父子组件是怎么传值的,然后对比vue3进行详解。一、vue2中父子组件传值<!-- 父组件 --> <template> <div> // name:父组件把值传给子组件test-child // childFn:...

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

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

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...

Vue进阶(二十六):详解router.push()

在Vue2.0路由跳转中,除了使用 <router-link> 声明式创建 a 标签来定义导航链接,还可以借助 router 的实例方法,通过编码式编写代码来实现。router.push(location)想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 hi...

Ruoyi-vue第五十二章:Uniapp小程序配置tabbar底部导航栏

一、功能实现效果如下图底部的tabbar二、uniapp的tabBar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性...

原生微信小程序打包成安卓/IOS应用!#小程序开发

原生微信小程序打包成公。好消息,微信小程序可以直接打包成APP了你们知道吗?微信团队近日开发了一个多端开发平台。多端据文档描述,多端开发框架是支持使用小程序原生语法开发移动端应用的框架。开发者可以一次编码分别编译为小程序安卓以及iOS应用,实现多端开发。我们进入多端框架开发的文档,来看看怎么使用微信...