-
질문 & 답변
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
data-position 지정 질문드립니다.
21.04.28 11:56 작성 조회수 115
0
function processTouchMove(event){
event.preventDefault();
let currentX = event.clientX || event.touches[0].screenX;
nowActiveLi = Number(currentActiveLi) + (Number(currentX)-Number(touchstartX));
currentClassList.style.transition = 'transfrom 0s linear';
currentClassList.style.transform = 'translateX('+String(nowActiveLi)+'px)';
}
마지막 마우스끌기에관한 강의에서 나온 코드입니다.
currentActiveLi = currentClassList.getAttribute('data-position') 이 설정되어 있는데
currentClassList.style.transform = 'translateX('+String(nowActiveLi)+'px)' 이 실행된다음
currentClassList.setAttribute('data-position',nowActiveLi) 를 하지않는 이유가 궁금합니다.
답변을 작성해보세요.
0
잔재미코딩 DaveLee
지식공유자2021.04.29
안녕하세요. 어느 영상 부분인지는 기재를 안해주셔서, 정확히는 알수가 없는데요.
data-position 은 해당 카드가 최초 어느 위치에 있는지를 가지고 있는 변수라서요. 터치를 움직일 때, 해당 카드가 움직이는 모습을 보여주는 것은 transform 이고요. 그래서 터치를 움직일 때는 transform 을 바꿔주면서, 해당 카드를 터치한만큼 이동을 시켜줬고요. 터치가 끝나면, 터치한만큼의 애매한 위치에 카드를 놓는 것이 아니라, 일정한 간격을 둔 위치로 자동 이동을 시켜준 후에, 여기가 카드가 위치한 곳이니, 다음 카드를 또 터치할 경우, 여기부터 시작하라는 것을 알려주기 위해, 그 때 비로소 data-position 값을 설정한 것입니다.
그래서, 결론적으로 카드를 터치한만큼 이동하도록 하는 기능이 transform 이고, data-position 은 터치가 끝난 후, 최종 위치만 알려주는 기능을 하기 때문에, 터치할 때마다 data-position을 바로바로 설정할 필요는 없습니다. 워낙 브라우저마다 성능차이도 있어서, js 로는 가능한 최소한의 동작만 하도록 하는 것도 좋기도 합니다.
감사합니다.
답변 1