Как сделать проверку что див находится в центре другого дива

Рейтинг: 0Ответов: 1Опубликовано: 08.01.2023

У меня есть див в котором можно перемещать другой див, изменять его размеры и вращать. Как мне сделать так что когда этот див находится в центре он меня оповещал алертом что он ровно по центру другого дива по ширине или по высоте.

javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Вариант 1

let centeredDiv = document.querySelector('#centered-div');
let parentDiv = document.querySelector('#parent-div');

let centeredDivWidth = centeredDiv.offsetWidth;
let centeredDivHeight = centeredDiv.offsetHeight;
let parentDivWidth = parentDiv.offsetWidth;
let parentDivHeight = parentDiv.offsetHeight;

if ((centeredDivWidth + centeredDiv.offsetLeft) == (parentDivWidth / 2) 
 && (centeredDivHeight + centeredDiv.offsetTop) == (parentDivHeight / 2)) {
 console.log('Div центрирован');
 
} else {
 console.log('Div не центрирован');
}

Вариант 2

let centeredDiv = document.querySelector('#centered-div');
let parentDiv = document.querySelector('#parent-div');

let centeredDivWidth = centeredDiv.offsetWidth;
let centeredDivHeight = centeredDiv.offsetHeight;
let parentDivWidth = parentDiv.offsetWidth;
let parentDivHeight = parentDiv.offsetHeight;

if ((parentDivWidth / 2)  - (centeredDivWidth / 2) == centeredDiv.offsetLeft
 && (parentDivHeight / 2) - (centeredDivHeight / 2) == centeredDiv.offsetTop) {
 console.log('Div центрирован');
 
} else {
 console.log('Div не центрирован');
}