如何使用react JS实现Packery？

Question

我有一些反应组件，希望将它们放到网格上。这些反应组件应具有拖放功能。拖放完成后，网格应该重新布局

Answer 1

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

这是我到目前为止的研究结果（肯定不完整！）

大卫·德桑德罗（David Desandro）

此方法需要通过生命周期https://reactjs.org/docs/integrating-with-other-libraries.html

与jQuery配合使用

• 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/反应可拖动
• 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