[JS30] - 27) Click and Drag

GY·2021년 11월 7일

Javascript 30 Challenge

목록 보기

27/30

pageX - offsetLeft

$items.addEventListener('mousedown',(e) => {
	startX = e.pageX - $items.offsetLeft;
})

$items.addEventListener('mousemove',(e) => {
	const x = e.pageX - $items.offsetLeft;
    
    const walk = x - startX;
})

사실 여기에서 $items.offsetLeft는 0으로 나오고, 이게 0이어도 기능 구현에는 아무런 문제가 없는데 왜 이걸 넣었는지??? 모르겠다. 다른 비슷한 기능을 구현하면서 알아봐야겠다. 더 공부해야하는 부분이다.

드래그해 움직인 커서의 pageX좌표 - 처음 클릭한 곳의 pageX좌표 = 커서를 움직인 거리이다.
이것을 scrollLeft로 지정하면 움직인만큼 스크롤 된다.

    $items.scrollLeft = walk;

단, 움직이는 거리가 커질 수록 당연히 scrollLeft도 커지면서 움직이는데, 그렇게 되면 위 GIF와 같이 드래그하는 방향으로 스크롤 되어 부자연스럽다.

우리가 바라는 것은 드래그 하는 반대방향으로 스크롤되어, 실제 화면의 요소는 드래그 하는 방향으로 이동하는 것이다.

$items.addEventListener('mousedown', (e) => {
  scrollLeft = $items.scrollLeft;
});

$items.addEventListener('mousemove', dragScroll)
function dragScroll(e) {
    $items.scrollLeft = scrollLeft - walk;
}