728x90
https://html.spec.whatwg.org/multipage/dnd.html#dnd
HTML Standard
This section defines an event-based drag-and-drop mechanism. This specification does not define exactly what a drag-and-drop operation actually is. On a visual medium with a pointing device, a drag operation could be the default action of a mousedown event
html.spec.whatwg.org
drag and drop algorithm
mousedown -> mousemove -> mouseup (ondragstart cancel)
drag 시작 시에 포인터 초기 이동 기억 후 유지 (shiftX, shiftY)
elementFromPoint 로 드롭 요소 감지
- mouseup에서 데이터를 변경하고, 요소를 이동하는 등 지적으로 드롭을 끝낼 수 있다
- 특정 영역이나 방향으로 드래그하는 것을 제한할 수 있다.
- mousedown/up에 이벤트 위임을 사용할 수 있다. event.target을 확인하는 넓은 영역의 이벤트 핸들러는 수백 개의 요소에 대한 드래그 앤 드롭을 관리할 수 있다.
728x90
'Web > JavaScript' 카테고리의 다른 글
| [기본] type of 및 자료형 요약정리 (0) | 2023.10.23 |
|---|---|
| [기본] 자료형 - 객체 (1) | 2023.10.23 |
| 브라우저 이벤트정리 2.Moving the mouse (0) | 2023.10.22 |
| 브라우저 이벤트 정리 1. 마우스이벤트 (0) | 2023.10.22 |
| 브라우저 기본 동작 (0) | 2023.10.21 |