javascript - Using Mootools to prevent overlapping with random absolute positioning

Question

I have over 50 simple text messages in a database and I extract them (using PHP) and place them randomly on a page using absolute positioning. Unfortunately some of these messages overlap each other, that I wish to prevent.

Can I use MooTools to find the position of each of these elements and their dimensions so that the new element to be placed on the page won't overlap any of the previous ones?

Using MooTools 1.3 with all core functions.

Answer 1

我无法对这个问题发表评论，可能是因为我以“客人”的身份问它，现在我已经注册了。

我的 HTML/CSS 非常简单。http://jsfiddle.net/bDDLt/

PHP 对位置和样式进行计算，并将这些变量放入元素样式中。jsfiddle 中的值是示例（因为它不接受 PHP）

Answer 2

查看Element.getCoordinates()以获取元素的坐标和尺寸。

在您的标记中，您可以message在每个消息元素上都有一个类，即用于选择的目的，以及一个在所有消息上hidden设置 CSS的类。visibility: hidden

然后，您将进行一些简单的边界检测以检测重叠消息，一旦domready避免重叠，您就可以删除hidden类以在页面上绘制消息。