❝
哈喽，我是树酱。我们知道目前的可视化低代码平台，大部分都具备可视化的编排场景，于是也有了拖拉拽的场景的需求。今天给大家分享一款最近刚开源的前端最强拖拽组件 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
原文始发于微信公众号（前端那些趣事）：最强拖拽组件 Pragmatic-drag-and-drop
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/274269.html
