Javascript로 Div 태그 드래그 이동 기능 구현

Openlayers로 map에 띄운 Overlay를 마우스 드래그로 이동하는 기능을 추가할 필요가 생겼습니다.

아래 코드는 Overlay로 띄운 popup을 마우스 드래그로 이동시키는 Javascript 소스 입니다.

const popupElement = document.getElementById('popup');

let isDragging = false;
let startPixel = null; // 드래그 시작 좌표

popupElement.addEventListener('mousedown', (event) => {
    isDragging = true;
    startPixel = [event.clientX, event.clientY]; // 마우스 클릭 좌표(초기위치)
    popupElement.style.cursor = 'grabbing'; // 드래그 중 커서 변경
});

// mousemove 이벤트: 드래그 중
document.addEventListener('mousemove', (event) => {
    if (!isDragging) return; //popupElement가 클릭된 상태에서 마우스를 이동(드래그)를 해야 아래 로직 실행

    const deltaX = event.clientX - startPixel[0]; //x 이동거리
    const deltaY = event.clientY - startPixel[1]; //y 이동거리
    startPixel = [event.clientX, event.clientY]; // 초기위치 변경

    const container = document.querySelector(".ol-overlay-container");

    //dom 객체 이동
    container.style.left = parseInt(container.style.left) + deltaX + 'px';
    container.style.top = parseInt(container.style.top) + deltaY + 'px';
});

document.addEventListener('mouseup', () => {
    isDragging = false;
    startPixel = null;
    popupElement.style.cursor = 'move'; // 드래그 종료 후 커서 복원
});