javascript - 将对象列表拖放到网格上

Question

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

行数:x

列数:y

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

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

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

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

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

屏幕截图示例可以在这里找到: /image/RJAQy.jpg

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

希望能帮到你。

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

Answer 1

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