在 Flex 4 中手动拖放，同时避免与其他可拖动对象发生碰撞

Question

我有一个生成的应用程序，其中一部分是练习，用户必须拖动一个或多个项目（主要是文本，但也可能是图像）并将其放入一个框中，如下所示。

http://eastblue.org/dragdropexample.png

该框是BorderContainer 的自定义子类。 每个可拖动项目（RichText 的子类）都使用startDrag() 在MouseEvent.MOUSE_DOWN 中拾取。当它在MOUSE_UP 上释放时，它会使用this.hitTestObject(box) 检查它是否击中了盒子，如果没有击中，则动画回到起始位置。如果它确实命中，我们会这样做

stopDrag();
this.x = e.stageX; // e is the MouseEvent
this.y = e.stageY;

效果很好。这种方法的问题是可拖动的项目可能会相互碰撞，这看起来不太漂亮。

我想防止可拖动的项目相互碰撞，同时确保它们保持在盒子内。

我考虑过两种方式来解决这个问题：

• 在框内创建某种网格，确保每个网格方块足够大以包含最大的可拖动项目，并让项目出现在最近的空闲网格方块中。

  这样做的问题是盒子和每个可拖动项目可以是任意大小，并且可以有任意数量的可拖动项目，因此确保用户可以根据需要将每个项目都放入盒子中有点麻烦并且仍然保持正常。

• 将每个掉落的物品与已经在掉落中的所有其他物品进行检查，如果它们发生碰撞，请将新掉落的物品朝其中一个方向移动一点，直到它们不再碰撞。

  这里的问题是把所有东西都放在盒子里，而不是陷入一个试图朝着不可能的方向移动的循环中。如果没有办法可以移动呢？

我错过了一些明显的方法，还是更简单的方法？如果没有，我怎样才能尽可能简单地实现呢？

有些碰撞可能没问题，因为用户不会花太多时间在其中一个练习上，但现在它的工作方式几乎看起来像是在互相寻找并可怕地崩溃。

Answer 1

使用 Flex 帮助中记录的 DragManager。只将接受代码放在您的 BorderContainer 上。然后将项目创建为 BorderContainer 的子项，并为其提供一个符合您要求的布局。