Учитывая две точки на веб-странице и набор элементов DOM, как узнать подмножество этих элементов DOM, которые находятся внутри области прямоугольника, определяемой двумя точками?
Я работаю над веб-галереей, в которой каждая фотография обернута тегом li. Когда пользователь перетаскивает область прямоугольника с помощью мыши, все элементы li внутри прямоугольника помечены как выделенные.
Предпочитаете решение jQuery для менее многословного и эффективного способа.
Попробуйте что-то вроде этого:
// x1, y1 would be mouse coordinates onmousedown
// x2, y2 would be mouse coordinates onmouseup
// all coordinates are considered relative to the document
function rectangleSelect(selector, x1, y1, x2, y2) {
var elements = [];
jQuery(selector).each(function() {
var $this = jQuery(this);
var offset = $this.offset();
var x = offset.left;
var y = offset.top;
var w = $this.width();
var h = $this.height();
if (x >= x1
&& y >= y1
&& x + w <= x2
&& y + h <= y2) {
// this element fits inside the selection rectangle
elements.push($this.get(0));
}
});
return elements;
}
// Simple test
// Mark all li elements red if they are children of ul#list
// and if they fall inside the rectangle with coordinates:
// x1=0, y1=0, x2=200, y2=200
var elements = rectangleSelect("ul#list li", 0, 0, 200, 200);
var itm = elements.length;
while(itm--) {
elements[itm].style.color = 'red';
console.log(elements[itm]);
}
Для ванильного решения JS, проверьте это перо: https://codepen.io/ArtBIT/pen/KOdvjM