팝업 드래그 해서 위치 옮기기

게임 UI처럼 팝업을 원하는 위치로 이동시키고 싶을 때가 자주 있다.

 

아래 제이쿼리로 화면 내에서 팝업이 벗어나지 않게 하면서

팝업 헤더를 드래그 해서 팝업을 움직이는 기능

 

function enablePopupDrag() {
    var $currentPopup = null; //현재 드래그 중인 팝업 요소 저장
    var clickOffsetX, clickOffsetY; //팝업이 클릭된 위치와 팝업의 left, top 경계 사이의 offset(거리) 저장

    $('.popup_header').on('mousedown', function(e) { //사용자가 팝업 헤더에 마우스를 눌렀을 때 이벤트 시작
        $currentPopup = $(this).closest('.popup'); //이벤트가 발생한 헤더와 팝업 헤더와 가장 가까운 팝업 요소를 찾아서 저장
        clickOffsetX = e.clientX - $currentPopup.offset().left; //사용자가 클릭한 위치와 팝업의 시작 위치 사이의 오프셋을 계산하여 저장
        clickOffsetY = e.clientY - $currentPopup.offset().top;

        $(document).on('mousemove.drag', function(e) { //mousemove.drag 이벤트를 사용해서 사용자가 마우스를 움직일 때 팝업이 같이 이동
            if ($currentPopup) {
                var newLeft = e.clientX - clickOffsetX; //팝업의 새 좌표 계산
                var newTop = e.clientY - clickOffsetY;

				//팝업이 화면을 벗어나지 않게 함
                var minLeft = 0; //팝업의 최소 좌표(화면의 왼쪽 상단)
                var minTop = 0;
                var maxLeft = $(window).width() - $currentPopup.outerWidth(); //팝업의 최대좌표(화면의 우측 하단)
                var maxTop = $(window).height() - $currentPopup.outerHeight();

                newLeft = Math.min(Math.max(minLeft, newLeft), maxLeft);
                newTop = Math.min(Math.max(minTop, newTop), maxTop);

                $currentPopup.css({
                    left: newLeft + 'px',
                    top: newTop + 'px'
                });
            }
        });

        $(document).on('mouseup.drag', function() { //마우스 버튼을 놓을 때 드래그 기능 중지 + 등록된 이벤트 핸들러 제거
            $(document).off('mousemove.drag mouseup.drag');
            $currentPopup = null;
        });

        e.preventDefault(); //클릭에 따른 기본 동작 발생 막음
    });
}