오늘은 모던 JavaScript 튜토리얼에서 드래그 앤 드롭과 마우스 이벤트에 대해 공부했다. 작성한 질문은 다음과 같다.
드래그 앤 드롭 알고리즘은 다음과 같은 순서로 진행된다.
- mousedown에는 움직일 요소를 준비한다. 이때, 기존 요소의 복사본을 만들거나 해당 요소의 클래스를 추가하는 등 원하는 형태로 작업할 수 있다.
- 이후 mousemove에서 position:absolute의 left, top을 변경한다.
- mouseup에서는 드래그 앤 드롭 완료와 관련된 모든 작업을 수행한다.
이러한 기반을 이용하여 날아가는 요소를 강조하거나 특정 영역이나 방향으로 드래그하는 것을 제한할 수도 있다.
'TIL' 카테고리의 다른 글
TIL - 20220908 (1) | 2022.09.08 |
---|---|
TIL - 20220907 (0) | 2022.09.07 |
TIL - 20220905 (0) | 2022.09.05 |
TIL - 20220904 (0) | 2022.09.04 |
TIL - 20220903 (0) | 2022.09.03 |