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

Question

我想制作一个如下图所示的自定义布局。

我已经尝试了 Tile Layout 并修改了它的 calculateDropIndex 方法，但没有得到想要的行为。

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

http://gridster.net/

Gridster layout screenshot

Answer 1

经过更多的尝试，我可以制作一个类似于拖放网格组件的网格。

这里简要总结一下我是如何制作这个组件的。 在将 pods 添加到容器中时，在同一位置再添加一个 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 - 一旦冲突得到解决，我们将使用此功能更新所有节点。如果 space 为空，此函数将向上移动节点。

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

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

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

希望这会有所帮助。

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

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