Javascript 获取页面矩形区域内的DOM元素

给定网页上的两点和一组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]);
}

//x1，y1将是鼠标向下的坐标
//x2，y2将是鼠标坐标
//所有坐标都被视为相对于文档的坐标
功能矩形选择（选择器，x1，y1，x2，y2）{
var元素=[]；
jQuery（选择器）.each（函数（）{
var$this=jQuery（this）；
var offset=$this.offset（）；
var x=偏移量。左；
var y=offset.top；
var w=$this.width（）；
var h=$this.height（）；
如果（x>=x1
&&y>=y1
&&x+w谢谢ArtBIT。我刚刚在Google上搜索了一会儿。似乎没有什么方便的方法可以做到这一点，除了循环所有DOM元素并对它们进行小学数学运算之外，没有更好的解决方案。不用担心@powerboy，是的，这就是为什么我添加了
选择器
支持，以减少需要处理的元素数量。你可以用于在一次调用中获取具有
顶部
、
右侧
、
底部
、
左侧
、
宽度
和
高度
的对象。@ArtBIT:如何查找元素在给定的矩形坐标内，如果我没有一个选择器来传递到上面提到的“rectangleSelect”方法中？我不想将顶级文档作为选择器，因为遍历每个元素会对性能造成很大影响。