❝哈喽,我是树酱。我们知道目前的可视化低代码平台,大部分都具备可视化的编排场景,于是也有了拖拉拽的场景的需求。今天给大家分享一款最近刚开源的前端最强拖拽组件 Pragmatic-drag-and-drop 后文中称为Pragmatic
近期也荣登热门榜开源项目 👇
![f7a8abdc58d218da23f7a1cce6ac716a.png](https://i-blog.csdnimg.cn/blog_migrate/8547cd4da77d822427d23db3925f22ed.png)
关于
先简单介绍下:
它是由Atlassian 公司出品。一个关注性能的拖放库,可用于增强前端用户体验。看Pragmatic这个名字的中文含义:“实用主义的” 就显得与众不同
之前第一次听说这家公司的时候,是因为公司内部wiki用的是他家的confluence。其他产品还有Trello、Jira等。
![84f68631eab667ee37077d28947510f3.png](https://i-blog.csdnimg.cn/blog_migrate/ce36965ffe94aec01dbda8c6f94546e6.png)
特征
Pragmatic支持多种形态的拖拽场景:
列表
面板
Grid
表格
树
Drawing
Resize
相比同类开源库,它支持更多的场景使用。下图是与react同类型的开源库react-beautiful-dnd的对比图(也是Atlassian家开源的)
![d7b0ab9542e0ed0792c5f857c27f76e1.png](https://i-blog.csdnimg.cn/blog_migrate/93bffb3a00cd039674bfe181bcd664c5.png)
实际的演示效果👇
框架支持
Pragmatic支持在任何一个框架(如react、svelte、vue、angular)中使用,不受特定技术栈的限制
![e0e4b329d2ef727865a70e4ace2a793a.png](https://i-blog.csdnimg.cn/blog_migrate/bb350ec80f68eb69fa914e95fee93935.png)
不同框架的写法可以参考如下👇
在react中使用:
![90c794588213922f143bddfb8a581a2f.png](https://i-blog.csdnimg.cn/blog_migrate/9fe08e8fa201ef4ddd5ec74862a4b6c2.png)
在svelte中使用:
![f6628cd4877e5fb3537e94430aad0da6.png](https://i-blog.csdnimg.cn/blog_migrate/148c9249b26d0f39cf3e55b91cab546f.png)
在js中使用:
![e9c00b1e31a7cab13015dd614dcad7ad.png](https://i-blog.csdnimg.cn/blog_migrate/6ad6e8a22e3fe08be13fa58bbc0c3705.png)
体积大小
Pragmatic对比其他同类型的拖拉拽开源库的体积大小及压缩后的大小,Pragmatic作为核心包更轻更小,4.7kB !
![29973a7624dce4e0a1f0634080ed6843.png](https://i-blog.csdnimg.cn/blog_migrate/0f8b16632200d73ac168f835ca1664af.png)
性能
通过对比以下同类型社区开源框架:
react-beautiful-dnd
react-dnd
@dnd-kit
![080480d1e7dcc070f07ea9b2b11baaf5.png](https://i-blog.csdnimg.cn/blog_migrate/6820652baa0c780495d444f6b23c855f.png)
TTI指标秒杀其他类库!
❝TTI: Time to Interactive,可交互时间。该指标主要用于测量页面从开始加载到主要子资源完成渲染,并能够快速、可靠地响应用户输入所需要的时间。
文档
文档链接:https://atlassian.design/components/pragmatic-drag-and-drop/examples
Github仓库地址:https://github.com/atlassian/pragmatic-drag-and-drop