手动拖放Flex 4,同时避免与其他可拖动装置发生碰撞

时间:2012-05-16 17:19:15

标签: flex drag-and-drop flex4 collision-detection

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

http://eastblue.org/dragdropexample.png

该框是BorderContainer的自定义子类。 每个可拖动项目(RichText的子类)都使用MouseEvent.MOUSE_DOWNstartDrag()中获取。当它在MOUSE_UP上被释放时,它会检查它是否使用this.hitTestObject(box)打到方框,如果没有命中,则将动画重新设置回起始位置。如果它确实击中了,我们

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

效果相当好。这种方法的问题在于可拖动的物品可能相互碰撞,看起来不太漂亮。

我想防止可拖动的物品相互碰撞,同时确保它们被放在盒子里。

我考虑过以两种方式解决这个问题:

  • 在框内创建某种网格,确保每个网格方块足够大,以包含最大的可拖动项目,并使项目显示在最近的自由网格方格中。

    这个问题是盒子和每个可拖动物品可以是任何尺寸,并且可以有任意数量的可拖动物品,所以如果他想要的话,确保用户可以丢弃盒子内的每个物品有点麻烦并且仍然看起来没问题。

  • 检查每个掉落的物品与掉落中已经存在的所有其他物品,如果它们发生碰撞,则将新掉落的物品沿其中一个方向移动一点,直到它们不再发生碰撞为止。

    这里的问题是将所有内容保留在盒子内,而不是陷入试图向不可能的方向移动的循环中。如果无法移动

  • ,该怎么办呢?

我错过了一些明显的方法,或者更简单的方法吗?如果没有,我怎样才能尽可能简单地实现它呢?

有些碰撞可能没问题,因为用户不会在这些练习中花费太多时间,但现在它的工作方式似乎几乎是互相寻找并且可怕地崩溃。

1 个答案:

答案 0 :(得分:2)

使用Flex帮助中记录的DragManager。只将接受代码放在BorderContainer上。然后制作BorderContainer的子项,并为它提供一个符合你想要的布局。