大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 pragmatic-drag-and-dropFast drag and drop for any experience on any tech stack
pragmatic-drag-and-drop 是一个底层拖放工具链，可以安全、高效地用于内置拖放功能的浏览器，可用于任何视图框架，包括：React、Svelte、Vue、Angular 等，目前已经用于包括 Trello、Jira 和 Confluence 在内的诸多在线应用产品。
pragmatic-drag-and-drop 拖放库本身非常注重性能，可用于增强任何技术堆栈上的任何拖放体验，使浏览器上拖拽变得强大而灵活，内置的拖放功能安全而高效。
pragmatic-drag-and-drop 的典型能力包括：
支持非常底层的拖放行为：包含一个核心包和许多可选包，为开发者提供优质拖放体验，且不依赖于特定设计系统。体积小：~4.7kB 核心库，支持插件化能力集成和扩展支持 Headless：完整的渲染和风格控制、适用于任何前端框架、Firefox、Safari、Chrome、iOS 和 Android 中的完整功能支持支持延迟兼容：延迟加载核心包和可选包，以进一步提高页面加载速度虚拟化支持：创建任何想要的虚拟体验、可选的视觉输出可选的辅助技术控制：提供了一个工具链，使开发者能够快速连接高性能的辅助技术以获得任何体验。目前 pragmatic-drag-and-drop 在 Github 通过 MIT 协议开源，有超过 2.5k 的 star、是一个值得关注的前端开源项目。
如何使用 pragmatic-drag-and-drop可以通过下面示例代码让元素变成可拖拽的，同时提供了 onDragStart、onDrop 等众多钩子来处理元素本身拖放动作：
function Piece({image, alt}: PieceProps) { const ref = useRef(null); const [dragging, setDragging] = useState<boolean>(false); // NEW useEffect(() => { const el = ref.current; invariant(el); return draggable({ element: el, onDragStart: () => setDragging(true), // NEW onDrop: () => setDragging(false), // NEW }); }, []); return ( <img css={[dragging && hidePieceStyles, imageStyles]} // 使用状态切换 css 来隐藏该片段 src={image} alt={alt} ref={ref} /> );}更多关于 pragmatic-drag-and-drop 的高级用法可以参考文末资料，本文不再过多展开。
参考资料https://github.com/atlassian/pragmatic-drag-and-drop
https://atlassian.design/components/pragmatic-drag-and-drop/tutorial
https://botsify.com/blog/chatbot-builder/
