使用 Mootools 防止与随机绝对定位重叠
我的数据库中有 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
查看 Element.getCooperatives() 获取坐标和元素的尺寸。
在您的标记中,您可以在每个消息元素上有一个类,即
message
以便进行选择,以及一个设置 CSSvisibility: 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 classhidden
that sets CSSvisibility: 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 thehidden
classes to draw the messages on the page.我无法对此问题发表评论,可能是因为我以“访客”身份提出问题,现在我已注册。
我的 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)