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

Question

[koposov_v]

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

Comments

[Somewhere Intech]

https://developer.mozilla.org/ru/docs/Web/API/Inte...

[Роман]

Спасибо, не знал про такое API

Answer 1

[Роман]

устаревшее решение

1. создаем функцию которая
1.1 получает 3 параметра
- ссылку на первый блок
- ссылку на второй блок
- ссылку на колбэк функцию, которую нужно будет выполнить при пересечении блоков
1.2 определяет координаты верхнего левого угла каждого из сравниваемых элементов и их высоту и ширину
1.3 сравнивает местоположения блоков и в случае их наложения вызывает колбэк
2 ВАЖНО созданную функцию вызываем каждый раз, как происходит перемещение одного из отслеживаемых элементов

сама функция сравнения:

function testIntersection(elem1, elem2, cb){
   // получаем координаты первого и второго элемента 
   let box1 = elem1.getBoundingClientRect();
   let box2 = elem2.getBoundingClientRect();

   let isIntersection = true;

   // если нижняя грань первого элемента выше чем верхняя грань второго - НЕПЕРЕСЕКАЮТСЯ
   if ( box1.bottom < box2.top ){  isIntersection=false;  }

   // если верхняя грань первого элемента ниже чем нижняя грань второго - НЕПЕРЕСЕКАЮТСЯ
   if ( box1.top > box2.bottom ){  isIntersection=false;  }

   // если правая грань первого элемента левее чем левая грань второго - НЕПЕРЕСЕКАЮТСЯ
   if ( box1.right < box2.left ){  isIntersection=false;  }

   // если левая грань первого элемента правее чем правая грань второго - НЕПЕРЕСЕКАЮТСЯ
   if ( box1.left > box2.right ){  isIntersection=false;  }

   // если всеже пересекаются, выполняем колбэк функцию
   if( isIntersection ){
      cb();
   }
}

Актуальное решение дано в комментарии к вашему вопросу от Johnny Lowhunter