Lấy các phần tử DOM bên trong vùng hình chữ nhật của một trang

Question

Cho hai điểm trên một trang web và một tập hợp các phần tử DOM, cách tìm ra tập con của các phần tử DOM nằm trong khu vực hình chữ nhật được xác định bởi hai điểm?

Tôi đang làm việc trên thư viện dựa trên web, trong đó mọi ảnh được gói trong thẻ li. Khi người dùng kéo ra một vùng hình chữ nhật bằng chuột, tất cả các phần tử li bên trong hình chữ nhật được đánh dấu là đã chọn.

Ưu tiên giải pháp jQuery cho ít lời nói và hiệu quả hơn.

Answer 1

Hãy thử một cái gì đó như thế này:

// 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]); 
}