jquery - 如何使用 jquery 基于 xy 坐标选择元素，而不是使用鼠标拖动？

Question

如何根据 XY 坐标选择元素，而不是使用 jquery 进行鼠标拖动？

Answer 1

如下所示，jQuery 插件将选择（部分）位于 >= x 和 >= y 位置的所有元素。

(function($){
    $.fn.filterXY = function(x, y){
        return this.filter(function(){
            var $this = $(this),
                offset = $this.offset(),
                width = $this.width(),
                height = $this.height();
            return offset.left + width >= x
                && offset.top + height >= y;
        });
    }
})(jQuery);

例子：

$("*").filterXY(0,0);
$("div").filterXY(100, 0);

---

更新：用于过滤 x1 和 x2 之间的所有元素的插件

演示：http: //jsfiddle.net/yx4sN/7/

(function($){
    $.fn.inRangeX = function(x1, x2){
        // Accepting selectors and DOM elements
        if (typeof x1 == "string" && +x1 != x1 || x1 instanceof Element) {
            x1 = $(x1);
        }
        if (typeof x2 == "string" && +x1 != x1 || x1 instanceof Element) {
            x2 = $(x2);
        }
        // Accepting jQuery objects
        if (x1 instanceof $) {
            x1 = x1.offset().left;
        }
        if (x2 instanceof $) {
            x2 = x2.offset().left;
        }
        x1 = +x1;
        x2 = +x2;

        // Make sure that x1 < x2
        if (x1 > x2) {
            var x = x1;
            x1 = x2;
            x2 = x;
        }
        return this.filter(function(){
            var $this = $(this),
                offset = $this.offset(),
                rightSide = $this.width() + offset.left;
            return offset.left >= x1
                  && rightSide <= x2;
        });
    }
})(jQuery);