반응형 localStorage1 [HTML/CSS/JS] 드래그앤드롭 Todo 앱 만들기 드래그앤드롭 Todo 앱 — 바닐라 JS로 만들기왜 만들었나Todo 앱은 가장 흔한 예제지만, 제대로 만들면 꽤 배울 게 많다. 특히 드래그앤드롭은 외부 라이브러리 없이 HTML5 Drag and Drop API만으로도 충분히 구현 가능하다. 이번에는 프레임워크 없이 바닐라 JS로 아래 기능을 모두 구현했다.할 일 추가 / 완료 / 삭제드래그로 순서 변경필터 (전체 / 진행 중 / 완료)LocalStorage 영구 저장기술 상세HTML5 Drag and Drop API드래그앤드롭의 핵심은 6개 이벤트다.이벤트발생 시점사용 목적dragstart드래그 시작드래그 중인 요소 기억dragover대상 위로 드래그 중preventDefault() 필수 (drop 허용)dragleave대상에서 벗어남하이라이트 제거d.. 2026. 2. 26. 이전 1 다음 반응형