拖放网格上的对象列表

Question

我正在构建一个 webapp（在 django 上），我要求用户提供以下内容：

行数：x

列数：y

以交互方式让用户决定行和列标签

以及要拉入虚拟网格的对象列表

让我们以 3 列、4 行标签为 Column i (i=1..x)、Row j (j=1..y) 和 3 个名为“red”、“black”、“grey”的对象为例

有了这些，我想在自动构建的网格上进行拖放对象交互。

当从对象池中拉出方块时，它们可以放置在网格的盒子中而无需将它们从池中移除（对象是无限的）。 所以基本上用户可以用红色填充所有东西，混合 3 种颜色，一些填充和一些空，等等..

截图示例可以在这里找到： https : //imgur.com/a/BJMzr9q

你知道是否已经为此目的创造了一些东西吗？ 我查看了“可拖动”库，但没有一个示例真正适合我的情况。

希望你能帮忙。

如果不清楚，我还处于学习阶段。

Answer 1

您可以使用 HTML5DnD https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API它具有 API 来配置要拖动的项目和要删除的项目。