哈喽，我是树酱。我们知道目前的可视化低代码平台，大部分都具备可视化的编排场景，于是也有了拖拉拽的场景的需求。今天给大家分享一款最近刚开源的前端最强拖拽组件 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