JQuery | Получить элементы div в определенной области

Есть ли простой способ получить элементы div, полностью установленные в определенной области?

Пример:

<div id="redbox"> RESIZE DIV </div>

<div id="grid">
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <div id="box4"></div>
</div>

У меня есть 4 коробки (серый), и я могу изменить размер div (красный поверх всех ящиков). После изменения размера я хочу знать, какие из элементов div полностью установлены в этой области.

Кто-нибудь знает, как это сделать? Есть ли метод или функция в JQUERY?

Ответы

Ответ 1

Мне кажется, что плагин withinBox может помочь вам решить эту проблему (jquery.fn.withinBox). Вы можете использовать код следующим образом:

var area = $('#redbox'),
    offset = area.offset(),
    selected = $('#grid div').withinBox(offset.left,
                                        offset.top,
                                        area.width(),
                                        area.height()
                                        );

Ответ 2

Что я делаю с JQuery, это цикл через все элементы для проверки, получение их значения .offset(), плюс ширина и высота.

Тогда для каждого элемента я получаю эти четыре значения:

X1 (offset().top)
Y1 (offset().left)
X2 (= X1 + width)
Y2 (= Y1 + height)

Я буду использовать эти значения, чтобы проверить следующие четыре точки (все же для каждого проверяемого элемента)

x1,y1  x1,y2  x2,y2  x2,y1  (the four corners)

При условии, что мы выполнили одно и то же преобразование с "покрывающим" DIV (извлекая его из четырех углов xd1, yd1, xd2, yd2), я буду рассуждать так:

Если одна или несколько этих точек попадают в мое "покрытие" DIV, тогда рассмотрим DIV "покрытый".

Изменить: Я не знал, что для этого есть плагин, я полагаю, что внутренняя механика похожа на мою, но я уверен, что это более простое решение, чем мое:)

Ответ 3

Я не думаю, что для этого уже есть полное решение. Согласно этому, это может быть различным.

Но для этого вы можете использовать document.elementFromPoint.

Зная абсолютную позицию повторно значимого div, вы можете создать карту координат, а затем посмотреть, какие элементы находятся под этим div.