드래그 앤 드롭(Drag and Drop) HTML5 CSS3 구현 example_html5 튜토리얼 기술

이 글에서는 HTML5의 드래그 앤 드롭 구현을 간략하게 소개합니다.
드래그 앤 드롭은 HTML5 표준의 일부입니다.
브라우저 지원: Internet Explorer 9, Firefox, Opera 12, Chrome 및 Safari 5는 드래그 앤 드롭을 지원합니다.

드래그된 요소, dragElement:
(1) 이벤트 추가: ondragstart
(2) 속성 추가: dragable

요소 배치, dropElement:
1. 이벤트 추가: ondargenter, ondragover, ondragleave, ondragend, ondrop
마우스 인/아웃 이벤트와 매우 유사하며 단어도 이해하기 쉽습니다. 자세한 내용은 다루지 않겠습니다. 아래에서 예시를 사용하겠습니다.

2. 페이지 요소 간 드래그 앤 드롭
다음은 각 이벤트가 어떻게 트리거되는지 보여주는 div 간 드래그 앤 드롭의 작은 예입니다.

코드 복사

코드는 다음과 같습니다.