dragstart, dragover, drop 이벤트로 요소를 이동합니다.
draggable=true인 요소에서 dragstart가 시작되고, 놓을 영역은 dragover의 기본 동작을 막아 drop을 허용합니다. dataTransfer로 이동할 데이터나 효과를 전달합니다.
Drag and Drop은 JavaScript가 브라우저 기능을 호출하고 결과와 실패를 처리하는 강좌입니다. 먼저 변수, 함수, 이벤트, DOM 기초를 익힌 뒤 학습하세요.
먼저 현재 결과를 확인한 뒤 dropzone 문구와 성공 후 카드 스타일을 바꿔보세요. 수정 전에는 예상한 변화를 한 문장으로 적고, 실행 뒤에는 정보 순서와 키보드 접근까지 그대로인지 살펴보세요.
마우스 드래그만 제공하면 키보드와 터치 사용자가 작업하기 어렵습니다. 버튼 기반 대안도 고려하세요.
직접 바꿔보세요dropzone 문구와 성공 후 카드 스타일을 바꿔보세요.