如何在使用react dnd拖放容器时将项目保存在容器内

Question

我正在构建一个基本的TypeScript反应应用程序来渲染和管理一个网格布局系统，这个系统包含一个12列网格，其中模块(可拖动项)可以放置在网格中。这些模块目前可以通过拖放自由移动。

目标是扩展算法，这样模块就可以在布局容器中移动。模块不能移动到布局容器的顶部、右侧和左侧边缘之外。底部边缘的行为不同。当模块向下移动到底部边缘之外时，底部边缘也应该向下移动以扩展布局容器的高度。此外，模块对象不能相互重叠。

单击URL：这是想要的结果查看图像

代码框链接(到目前为止的进展)

Answer 1

请设置安全壳/绑定家长。