javascript - 如何在 AS3 中制作类似 Gridster.js 的 Tile/Grid 布局？

Question

我想制作一个自定义布局，其行为如下图所示。

我已经尝试过 Tile Layout 并修改其calculateDropIndex 方法，但没有获得所需的行为。

当所有图 block 具有相同的高度和宽度但在我的情况下图 block 大小不同时，图 block 布局效果很好。

http://gridster.net/

Gridster layout screenshot

Answer 1

经过多一点尝试，我能够制作一个类似于拖放网格组件的网格器。

这里是我如何制作这个组件的简短总结。 将 pod 添加到容器时，在同一位置再添加一个 pod，并保持其可见性关闭。这个额外的节点将是我们的掉落指示器。 将所有原始节点保留在一个数组中，称为“节点”，将所有额外节点保留在另一个数组中，称为“dropIndicators”。

例如，如果在容器中添加节点 A、B 和 C。我们将添加三个额外节点 X、Y 和 Z，每个主节点各一个。

并且超过节点数组将是

node[0] = A;
node[1] = B;
node[2] = C;

dropIndicators 数组将是

dropIndicators[0] = X;
dropIndicators[1] = Y;
dropIndicators[2] = Z;

现在，当我们拖动任何节点时，您将需要以下函数来更新节点位置。

1. CalculateDropLocation - 计算拖动时的新放置位置。
2. CheckCollision - 检查两个节点之间的碰撞。
3. FixCollision - 如果发生碰撞，我们将使用此函数修复碰撞。该函数将递归地向下调整所有冲突节点。
4. updateNodes - 一旦冲突修复，我们将使用此函数更新所有节点。如果有空白空间，此函数会将节点向上移动。

现在，当我们开始拖动 A 节点时，计算 A 节点的新放置位置并将其相对额外节点(即 X)移动到新的放置位置，检查 X 是否与任何其他额外节点发生碰撞。我们将在所有函数中使用 dropIndicators 数组。 如果发生碰撞则调用fixCollision()函数，然后调用更新节点函数。

最后，一旦所有节点都更新，将所有额外节点的位置设置为其原始节点，即将 X 的位置设置为 A 的位置，Y 的位置设置为 B 等。在更新原始节点位置时，您可以使用移动动画在容器中平滑地移动节点。

希望这会有所帮助。使用此方法，您可以用任何语言制作此类布局。

希望这会有所帮助。

有关更多详细信息和带有源代码的示例应用程序，请访问此 link

http://usefulflexcomponents.blogspot.in/2015/12/blog-post.html