最强拖拽组件 Pragmatic-drag-and-drop

❝

哈喽，我是树酱。我们知道目前的可视化低代码平台，大部分都具备可视化的编排场景，于是也有了拖拉拽的场景的需求。今天给大家分享一款最近刚开源的前端最强拖拽组件 Pragmatic-drag-and-drop  后文中称为Pragmatic

近期也荣登热门榜开源项目 👇

关于

先简单介绍下：

它是由Atlassian 公司出品。一个关注性能的拖放库，可用于增强前端用户体验。看Pragmatic这个名字的中文含义：“实用主义的” 就显得与众不同

之前第一次听说这家公司的时候，是因为公司内部wiki用的是他家的confluence。其他产品还有Trello、Jira等。

特征

Pragmatic支持多种形态的拖拽场景：

• 列表

• 面板

• Grid

• 表格

• 树

• Drawing

• Resize

相比同类开源库，它支持更多的场景使用。下图是与react同类型的开源库react-beautiful-dnd的对比图（也是Atlassian家开源的）

实际的演示效果👇

框架支持

Pragmatic支持在任何一个框架（如react、svelte、vue、angular）中使用，不受特定技术栈的限制

不同框架的写法可以参考如下👇

在react中使用：

在svelte中使用：

在js中使用：

体积大小

Pragmatic对比其他同类型的拖拉拽开源库的体积大小及压缩后的大小，Pragmatic作为核心包更轻更小，4.7kB ！

性能

通过对比以下同类型社区开源框架：

• react-beautiful-dnd

• react-dnd

• @dnd-kit

TTI指标秒杀其他类库!

❝

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

文档

文档链接：https://atlassian.design/components/pragmatic-drag-and-drop/examples

Github仓库地址：https://github.com/atlassian/pragmatic-drag-and-drop