Javascript: виявлення зіткнених divs - javascript, html, геометрія, виявлення зіткнень, алгебра

Як визначити, чи не перетинаються два divs?

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

Це мій набір divs:

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

Я просто повністю застряг у цьому пункті. Як пройти по кожному розділу і перевірити, чи він стикається з будь-яким з інших divs?

Відповіді:

Вам потрібно петлі по кожному розділу, а потімпорівнювати з кожним другим розділом в вкладеній петлі. Тоді використовуйте логіку, подібну до того, що ви написали, щоб порівняти кожну комбінацію. Ось приклад, який просто виводить на виході дублікати, що перекриваються (зверніть увагу також на те, що я змінив 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/