reactjs - 如何用 React JS 实现 Packery？

Question

我有一些反应组件，我想用一些排水沟放在网格上。这些反应组件应该具有拖放功能。拖放完成后，网格应重新布局

标签： reactjsdrag-and-droppackery

Answer 1

我正在处理类似的问题。不知道你解决了没有。（如果您当然这样做了，请分享您的解决方案以帮助他人！）。这是我发现的众多 Packery for React npm 模块之一。大多数都非常相似。

这是我迄今为止的研究结果（当然不完整！）

大卫·德桑德罗

这种方法需要通过生命周期与 jQuery 反应https://reactjs.org/docs/integrating-with-other-libraries.html

• https://packery.metafizzy.co/draggable.html 原始包装器可拖动

反应包装（各种）

就我而言，这会出现 TypeError。我必须重写组件来引用 fn 而不是调用它（注意花括号）。（所有示例都是复制粘贴的，仅提供一个用例。不是很有帮助。）

• https://www.npmjs.com/package/react-packery-component react-packery-component
• https://github.com/mzabriskie/react-draggable/react-draggable _
• https://www.npmjs.com/package/react-drag react-drag

反应 DnD

至少可以说太冗长了。但如果你有时间配置它...

• https://medium.com/@dan_abramov/the-future-of-drag-and-drop-apis-249dfea7a15f 丹·阿布拉莫夫
• http://react-dnd.github.io/react-dnd/about 反应 DnD

CSS技巧

可能不够详细

• https://css-tricks.com/draggable-elements-push-others-way/ Chris Coyier