JS. 기껏 했더니 통째로 움직이고 난리...

 

 

        const drag = document.querySelector(".collection__photo"); // 드래그 대상 요소

        const initialMousePos = { x : 0}; // 드래그 시작 시점의 마우스 포인터 위치
        const offset = {x : 0}; //이동할 거리
        
        //mousemove 이벤트 핸들러
        const move = e => {
            offset.x = e.clientX -initialMousePos.x;
            
            drag.style.transform = `translate3D(${offset.x}px, 0, 0)`;
        }

        // mousedown 이벤트가 발생하면 드래그 시작 시점의 마우스 포인터 좌표를 저장한다
        drag.addEventListener('mousedown', e => {
            initialMousePos.x = e.clientX - offset.x;
            //mousedown 이벤트가 발생할 상태에서 mousemove 이벤트가 발생하면 box 요소를 이동시킨다.
            document.addEventListener('mousemove',move);
        })

        //mouseup 이벤트가 발생하면 Mousemove 이벤트를 제거해 이동을 멈춘다
        document.addEventListener('mouseup', ()=> {
            document.removeEventListener('mousemove', move);
        });