Javascript: обнаружение сталкивающихся div

Question

Как определить, перекрываются ли два элемента div?

Не принимая во внимание ширину элемента div, в основном это вертикальный отрезок.Точка (сверху, слева) - это точка А, а снизу (сверху + высота) - точка В и т. Д.Затем я сравнил бы каждый div с каждым другим div в массиве div, а затем создал бы массив div.Тем не менее, я застрял на том, как сделать это программно.

Это мой массив div:

var divs = [
    {class:'A', top:0,   left:0,   height:'60px'},
    {class:'B', top:50,  left:60,  height:'60px'},
    {class:'C', top:30,  left:10,  height:'60px'},
    {class:'D', top:100, left:180, height:'60px'},
    {class:'E', top:80,  left:50,  height:'60px'},
    {class:'F', top:110, left:200, height:'60px'},
    {class:'G', top:55,  left:80,  height:'60px'}
];

Вот функция, которую я запустил:

    this.collide = function( divs )
{
    var collidingDivs = [], z = events.length;

    for(i; i<z; i++)
    {
        if
        (
           // Begin pseudocode
           ( divsB.top >= divsA.top ) && 
           ( (divsB.top + divsB.height) <= (divsA.top + divsA.height) ) 
        )
        {
            collidingDivs.push(divs[i].class);
        }
    }
    console.log(collidingDivs); // Array of divs that overlap (collide)
};

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

Answer 1

Вам нужно перебрать каждый div, а затем сравнить с каждым другим div во вложенном цикле. Затем используйте логику, например, то, что вы написали, чтобы сравнить каждую комбинацию. Вот пример, который просто распечатывает перекрывающиеся элементы div для вывода (обратите внимание также, что я изменил элемент height, чтобы иметь числовое значение, а не текст, чтобы его значение можно было использовать в вычислениях):

var divs = [
    {class:'A', top:0,   left:0,   height:60},
    {class:'B', top:50,  left:60,  height:60},
    {class:'C', top:30,  left:10,  height:60},
    {class:'D', top:100, left:180, height:60},
    {class:'E', top:80,  left:50,  height:60},
    {class:'F', top:110, left:200, height:60},
    {class:'G', top:55,  left:80,  height:60}
];

for (var i=0; i < divs.length - 1; i++)
    for (var j=i+1; j < divs.length; j++)
    {
        var I=divs[i];
        var J=divs[j];

        if ( (I.top <= J.top && (I.top + I.height) >= J.top) ||
             (J.top <= I.top && (J.top + J.height) >= I.top) )
            document.writeln(
                I.class + " collides with " + J.class + "<br />");
    }

Выход:

A collides with B
A collides with C
A collides with G
B collides with C
B collides with D
B collides with E
B collides with F
B collides with G
C collides with E
C collides with G
D collides with E
D collides with F
D collides with G
E collides with F
E collides with G
F collides with G

Пример рабочего кода: http://jsfiddle.net/QUrWM/