在网格上拖放对象列表

Question

我正在构建一个网络应用程序（在 django 上），我要求用户提供以下内容：

行数：x

列数：y

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

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

我们以 3 列、4 行标签为例，第 i 列（i=1..x），第 j 行（j=1..y），以及 3 个名为 "red" 的对象 "black""grey"

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

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

可在此处找到屏幕截图示例： https://imgur.com/a/BJMzr9q

您知道是否已经为此目的创建了一些东西？我查看了库 "draggable"，但 none 的示例非常适合我的情况。

希望能帮到你。

如果不清楚，我还在学习阶段

Answer 1

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