Используйте jQuery .position или .offset, чтобы проверить, есть ли другой элемент, касающийся/перекрывающий его

Возможный дубликат:
обнаружение коллизий jQuery/Javascript

Как лучше всего использовать предпочтительно использование $.position, чтобы проверить, касается ли <div> или перекрывается ли он другим <div>?

Спасибо!


person kmb64    schedule 08.01.2012    source источник
comment
Похоже, что это, вероятно, хороший способ, это пример некоторого кода, который использует jquery position() и height()/width() для вычисления перекрывающихся div stackoverflow.com/questions/4230029/   -  person danbgray    schedule 09.01.2012


Ответы (1)


Вот функция, которую я написал некоторое время назад, которая делает это:

var percentCovered = function (dim1, dim2) {
    // The whole thing is covering the whole other thing
    if (
            (dim1.left <= dim2.left) && 
            (dim1.top <= dim2.top) && 
            ((dim1.left + dim1.width) >= (dim2.left + dim2.width)) && 
            ((dim1.top + dim1.height) > (dim2.top + dim2.height))
    ) {
            return 100;
    }
    // Only parts may be covered, calculate percentage
    else {
            dim1.right      = dim1.left + dim1.width;
            dim1.bottom     = dim1.top + dim1.height;
            dim2.right      = dim2.left + dim2.width;
            dim2.bottom     = dim2.top + dim2.height;

            var l = Math.max(dim1.left, dim2.left);
            var r = Math.min(dim1.right, dim2.right);
            var t = Math.max(dim1.top, dim2.top);
            var b = Math.min(dim1.bottom, dim2.bottom);

            if (b >= t && r >= l) {
            /* $('<div/>').appendTo(document.body).css({
                            background: 'red', 
                            position:   'absolute',
                            left:       l + 'px', 
                            top:        t + 'px', 
                            width:      (r - l) + 'px', 
                            height:     (b - t) + 'px', 
                            zIndex:     100
                    }); */

                    var percent = (((r - l) * (b - t)) / (dim2.width * dim2.height)) * 100;

            //      alert(percent + '% covered')

                    return percent;
            }
    }

    // Nothing covered, return 0
    return 0;
};

Он принимает в качестве аргументов два объекта, каждый из которых содержит свойства width, height, left и top. Нравится:

var el1     = $('#el-1');
var el2     = $('#el-1');
var offset1 = el1.offset();
var offset2 = el2.offset();
var dim1    = {
    width:  el1.outerWidth(), 
    height: el1.outerHeight(), 
    left:   offset1.left, 
    top:    offset1.top
};
var dim2    = {
    width:  el2.outerWidth(), 
    height: el2.outerHeight(), 
    left:   offset2.left, 
    top:    offset2.top
};

alert(percentCovered(dim1, dim2));

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

person powerbuoy    schedule 08.01.2012
comment
Да, спасибо, в итоге я написал что-то подобное, используя верхнюю, левую, ширину и высоту. Это не так сложно, поскольку у div нет никаких сумасшедших углов или форм! - person kmb64; 09.01.2012