Как проверить, пересекаются ли 2 прямоугольных DIV`а?
Добрый день!
Есть задача - на поле по клику мышки создаются стикеры с произвольным текстом в виде прямоугольников. Нужно, чтобы при нахождении стикеров на расстоянии ближе 20 пикселей друг к другу, они объединялись в один. Сложность заключается в идентификации этого пересечения. Для себя выявил 2 варианта:
1) Поместить DIV с надписью в другой DIV с отступами 20px с 4х сторон. И проверить, попадает ли другой DIV в эту область. Но как? Какие свойства задействовать?
2) Свести задачу к нахождению пересечения 2-х прямоугольников-стикеров. Но здесь абсолютно не понятно, какие формулы использовать.
Думаю тут поможет метод offset. Отталкиваться от верхнего левого края родителя, сопоставлять ширину стикеров и родителя. Сходу сложно выдать готовое решение, надо тестить.
UPD: Кстати, попробуйте использовать какой-нибудь drop плагин, в них ведь есть функционах определяющий пересечения элементов, думаю будет не сложно адаптировать к вашей задаче.
Поправочка: offset возвращает координаты относительно начала страницы, а вот position относительно ближайшего родителя, у которого задан тип позиционирования