Как реализовать перетаскивание элемента с учетом угла поворота?

Question

[Максим Власов]

Доброго времени суток! Есть функция, которая перемещает один элемент внутри другого. Обычное перемещение работает, но стоит повернуть элемент, как при начале перемещения он начинает прыгать.

Вот код функции:

startDrag(e, el) {
        if (this.isResizing || this.isRotating) return;

        e.preventDefault();
        this.isDragging = true;

        // Получаем текущие координаты элемента относительно родительского контейнера
        let parentRect = el.parentElement.getBoundingClientRect();
        let rect = el.getBoundingClientRect();

        // Получаем угол поворота элемента
        let transform = el.style.transform || 'rotate(0deg)';
        let angle = parseFloat(transform.match(/rotate\(([-\d.]+)deg\)/)[1]) || 0;
        let rad = (angle * Math.PI) / 180; // Переводим угол в радианы

        // Центр элемента относительно родительского контейнера
        let centerX = rect.left + rect.width / 2 - parentRect.left;
        let centerY = rect.top + rect.height / 2 - parentRect.top;

        // Смещение курсора относительно центра элемента
        let mouseOffsetX = e.clientX - parentRect.left - centerX;
        let mouseOffsetY = e.clientY - parentRect.top - centerY;

        // Корректировка смещения с учётом угла поворота
        let rotatedOffsetX = mouseOffsetX * Math.cos(-rad) - mouseOffsetY * Math.sin(-rad);
        let rotatedOffsetY = mouseOffsetX * Math.sin(-rad) + mouseOffsetY * Math.cos(-rad);

        let onMouseMove = (e) => {
            if (!this.isDragging) return;

            // Получаем новые координаты курсора относительно родительского контейнера
            let newMouseX = e.clientX - parentRect.left;
            let newMouseY = e.clientY - parentRect.top;

            // Пересчитываем координаты центра элемента с учётом смещения
            let newCenterX = newMouseX - rotatedOffsetX;
            let newCenterY = newMouseY - rotatedOffsetY;

            // Новые координаты левого верхнего угла элемента
            let newLeft = newCenterX - rect.width / 2;
            let newTop = newCenterY - rect.height / 2;

            // Устанавливаем новые координаты
            el.style.left = newLeft + 'px';
            el.style.top = newTop + 'px';
        };

        let onMouseUp = () => {
            this.isDragging = false;
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        };

        document.addEventListener('mousemove', onMouseMove);
        document.addEventListener('mouseup', onMouseUp);
    }

Тут e - это событие, el - перемещаемый элемент.
Я, учебник тригонометрии и 2 ИИ не справились с задачей.
У контейнера 100% position: relative, у элементов absolute.

Заранее огромное спасибо!