[JS30] - 27) Click and Drag
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;
}
이렇게 기존 맨 처음에 클릭했을 때 스크롤 좌표를 지정하고, 드래그할때마다 처음 스크롤 좌표 (0)에서 움직인만큼을 빼주면 위와 달리 scrollLeft는 음수가 된다.
즉, 반대방향으로 움직인다는 뜻이다!
offsetLeft
첫번째로 위치한 부모 left edge의 left + margin위치
상대적으로 위치한 가장 가까운 상위 요소(offsetParent)를 기준으로 지정 요소의 좌측 상단 모서리까지 상대적 좌측 거리(픽셀)를 가지고 있는 읽기 전용 속성
pageX - offsetLeft 부분을 보자.
그 외 참고 이미지
Reference
- http://www.devdic.com/javascript/refer/dom:285/property:1832/offsetLeft
- https://programmer.help/blogs/offsetwidth-offsetheight-offsetleft-offsettop-offsetparent.html
- https://mm4mm.tistory.com/9
- https://www.zerocho.com/category/JavaScript/post/5aa23cd4e70ee8001bc60b9a
Author And Source
이 문제에 관하여([JS30] - 27) Click and Drag), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gygy/JS30-27-Click-and-Drag저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)