使用 Mootools 防止与随机绝对定位重叠

发布于 2024-10-17 16:10:19 字数 184 浏览 6 评论 0原文

我的数据库中有 50 多条简单的文本消息,我提取它们(使用 PHP)并使用绝对定位将它们随机放置在页面上。不幸的是,其中一些消息相互重叠,我希望避免这种情况。

我可以使用 MooTools 查找每个元素的位置及其尺寸,以便放置在页面上的新元素不会与之前的任何元素重叠吗?

使用具有所有核心功能的 MooTools 1.3。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

不喜欢何必死缠烂打 2024-10-24 16:10:20

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

在您的标记中,您可以在每个消息元素上有一个类,即 message 以便进行选择,以及一个设置 CSS visibility: hide 的类 hidden > 所有消息。

在 domready 上,您将执行一些简单的边界检测来检测重叠消息,一旦避免重叠,您就可以删除隐藏类以在页面上绘制消息。

Have a look at Element.getCoordinates() to get the coordinates and dimensions of your elements.

In your markup you could have a class i.e. message on each message element for the purpose of selection, and a class hidden that sets CSS visibility: hidden on all the messages.

On domready you would then do some simple boundary detection to detect overlapping messages and once you've avoided overlapping you can remove the hidden classes to draw the messages on the page.

怀中猫帐中妖 2024-10-24 16:10:20

我无法对此问题发表评论,可能是因为我以“访客”身份提出问题,现在我已注册。

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

PHP 计算位置和样式,并将这些变量放入元素样式。 jsfiddle 中的值是示例(因为它不接受 PHP)

I'm unable to comment on this question, probably because I asked it as a "guest" and now I am registered.

My HTML/CSS is extremely simple. http://jsfiddle.net/bDDLt/

PHP does the calculations for the positions and styles and places these variables into the element styles. The values in the jsfiddle are examples (since it doesn't accept PHP)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文