Как проверить, пересекаются ли 2 прямоугольных DIV`а?

Добрый день!

Есть задача - на поле по клику мышки создаются стикеры с произвольным текстом в виде прямоугольников. Нужно, чтобы при нахождении стикеров на расстоянии ближе 20 пикселей друг к другу, они объединялись в один. Сложность заключается в идентификации этого пересечения. Для себя выявил 2 варианта:

1) Поместить DIV с надписью в другой DIV с отступами 20px с 4х сторон. И проверить, попадает ли другой DIV в эту область. Но как? Какие свойства задействовать?

2) Свести задачу к нахождению пересечения 2-х прямоугольников-стикеров. Но здесь абсолютно не понятно, какие формулы использовать.

Очень жду ответа! Спасибо!
  • Вопрос задан
  • 2533 просмотра
Решения вопроса 1
@GreatRash
Решение задачи в общем виде.
Решение задачи для ленивых.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
andykov
@andykov
Shit happens
Думаю тут поможет метод offset. Отталкиваться от верхнего левого края родителя, сопоставлять ширину стикеров и родителя. Сходу сложно выдать готовое решение, надо тестить.

UPD: Кстати, попробуйте использовать какой-нибудь drop плагин, в них ведь есть функционах определяющий пересечения элементов, думаю будет не сложно адаптировать к вашей задаче.
Ответ написан
Yuppi
@Yuppi Автор вопроса
Спасибо всем, разобрался

Пусть прямоугольники заданы как кооринаты противоположных углов - левый нижний и правый верхний:

Прям1=(x11,y11,x12,y12), Прям2=(x21,y21,x22,y22)

Тогда если x11x21 и y11y21, то пересечение есть
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы