如何在AS3中制作像Gridster.js这样的平铺/网格布局？

Question

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

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

当所有瓷砖具有相同的高度和宽度时，瓷砖布局效果很好，但在我的情况下，瓷砖尺寸不同。

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＆＃39; s位置到B等等。在更新原始节点位置时，您可以使用移动动画在容器中平滑移动节点。

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

有关详细信息和示例应用程序，请访问此link

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