Есть контейнер(позиционировани относительное),
задано overflow: hidden.
Есть элемент(позиционирование абсолютное), который с помощью jquery draggable можно двигать внутри контейнера, но при этом ограничений на перемещение нет.
Нужно сделать так, чтобы элемент удалялся, если он
полностью находится вне контейнера.
Если элемент не повернут, то проблем нет, у jquery draggable есть встроенный метод для определения таких штук. Если элемент повернут. то координаты определяются неправильно. Как я понял это проблема довольно известная у jquery, да и просто javascript.
Пробовал через getBoundingClientRect определять координаты, но всё равно работает не очень точно. Хочется сделать так, чтобы когда элемент полностью вышел за пределы контейнера(независимо от того как повернут элемент), он сразу удалился.
var container = element.parent(),
containerRect = container[0].getBoundingClientRect(),
elementRect = element[0].getBoundingClientRect();
if (elementRect.left + elementRect.width < containerRect.left ||
elementRect.top + elementRect.height < containerRect.top){
console.log('определение для двух сторон, что вышли за пределы контейнера, но работает не точно');
}
Причина, как я понимаю в том, что определяются координаты вот так(по красному прямоугольнику):
А нужно каким-то образом получить координаты именно вот такие и как-то потом понять, что элемент точно полностью за пределами контейнера хоть на 1px:
