如何在 AS3 中制作像 Gridster.js 这样的 Tile/Grid 布局？答案

【问题标题】：How to make a Tile/Grid layout like Gridster.js in AS3?如何在 AS3 中制作像 Gridster.js 这样的 Tile/Grid 布局？
【发布时间】：2016-01-24 12:53:58
【问题描述】：

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

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

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

http://gridster.net/

Gridster layout screenshot

【问题讨论】：

我不知道您对可移动面板的最终目标，但如果您正在寻找构建仪表板样式的应用程序，不久前，我使用了 Adobe 开源 Flex 3/4 Dashboard (由 WASI 开发）（adobe.com/devnet/flex/samples/dashboard.html），然后他们有一个 4 部分系列将其移植到 Flex4（adobe.com/devnet/flex/articles/migrating-flex-apps-part4.html）。我最终编写了一个自定义布局来处理大小不同的“pod”（就像 Gridster 一样）。如果我不得不再做一次，我会购买 Flexicious 的仪表板flexicious.com/Home/Dashboard
@RobertN 感谢您的回复。
@RobertN 感谢您的回复。我已经从您提供的链接中检查了这个仪表板示例，但是随着 pod 数量的增加，这里的瓷砖（pod）正在重新调整大小。我的要求是随着小部件数量的增加增加 pod 容器的高度。正如你所说，你已经编写了处理不同 pod 大小的自定义布局，我可以有一个演示链接或自定义布局文件本身。
那是一个合同项目，所以我不能重新分配它，但如果它是基于 Flex 4 Spark 布局类，只是扩展 TileLayout...
好的。没问题，但是否可以通过扩展 Tile 布局来实现与 gridster 相同的行为？

标签： javascript layout actionscript flex4 gridster

【解决方案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;

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

CalculateDropLocation - 在拖动时计算新的放置位置。
CheckCollision - 检查两个节点之间的冲突。
FixCollision - 如果发生碰撞，我们将使用此函数修复碰撞。此函数将递归地对所有碰撞节点进行模式化。
updateNodes - 一旦冲突被修复，我们将使用这个函数更新所有节点。如果有空白空间，此功能将向上移动节点。

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

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

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

希望这会有所帮助。

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

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

【讨论】：