[JS] draggable 구현하기

---

알고있으면 좋은 Javascript Tip✨

---

draggable

• draggable 라이브러리는 지정한 요소를 드래그로 이동시킬 수 있도록 만들어준다.
• 이때 draggable로 설정된 요소는 position: absolute 속성을 가지게 되며, left, top 속성으로 움직이게 된다.
• JS에서는 일반 요소의 drag 여부를 판단할 수 없다.
• 그러므로 드래그의 조건인 마우스 클릭과 움직임 이벤트로 드래그를 구현해야 한다.

 

(1) JQuery에 존재하는 draggable 라이브러리를 자바스크립트로 구현할 수 있다.

    const $draggable = (target) => {
        // 마우스를 눌렀을 때
        let $isPress = false;

        // 이전에 위치한 x 값
        let $prevPosX = 0;

        // 이전에 위치한 y 값          
        let $prevPosY = 0;           

        // 이벤트가 적용된 요소 위에서 마우스 왼쪽 버튼을 누를 때 발생
        target.onmousedown = start;

        // 마우스 버튼 누르고 있다가 뗄 때 발생
        target.onmouseup = end;

        // 이벤트가 적용된 요소 위에서 마우스를 움직일 때 발생
        window.onmousemove = move;

        function start(e){
            $prevPosX = e.clientX;
            $prevPosY = e.clientY;

            $isPress = true;
        }

        function move(e){
            // fasle 인 경우 종료
            if(!$isPress) return;

            // 이전 좌표와 현재 좌표 차이값
            const posX = $prevPosX - e.clientX;
            const posY = $prevPosY - e.clientY;

            // 현재 좌표가 이전 좌표로 바뀜
            $prevPosX = e.clientX;
            $prevPosY = e.clientY;

            // left, top으로 이동
            target.style.left = (target.offsetLeft - posX) + 'px';
            target.style.top = (target.offsetTop - posY) + 'px';
        }

        function end(){
            $isPress = false;
        }
    }


    window.onload = () => {
        $draggable($modalBox);
    }