dragstart, dragover, drop 이벤트로 요소를 이동합니다.
draggable=true인 요소에서 dragstart가 시작되고, 놓을 영역은 dragover의 기본 동작을 막아 drop을 허용합니다. dataTransfer로 이동할 데이터나 효과를 전달합니다.
카드를 끌기 시작하면 dragstart가 dataTransfer에 카드 id인 task를 text/plain으로 넣고, 놓을 영역 위를 지나는 동안 dragover가 기본 동작을 막으며 over 클래스로 배경을 바꿉니다. 놓는 순간 drop 처리기가 zone.append(task)로 카드를 영역 안으로 옮기고 완료 문구를 씁니다. drop은 dataTransfer 값을 읽지 않고 task 변수를 바로 쓰므로, 카드가 여러 장이면 getData로 id를 꺼내야 합니다.
링크와 이미지는 draggable을 지정하지 않아도 기본으로 끌 수 있고, div 같은 다른 요소는 draggable=true가 있어야 끌 수 있습니다. dragstart에서 effectAllowed를, dragover에서 dropEffect를 move로 맞추면 복사가 아니라 이동이라는 뜻을 브라우저의 커서 표시로 전달할 수 있습니다.
마우스 드래그만 제공하면 키보드와 터치 사용자가 작업하기 어렵습니다. 버튼 기반 대안도 고려하세요.
직접 바꿔보세요dropzone 문구와 성공 후 카드 스타일을 바꿔보세요.