TL; DR – HTML5 드래그 앤 드롭 API를 사용하면 커서로 HTML 개체를 잡고 다른 위치로 드래그하세요.
HTML5에서 무엇을 드래그 앤 드롭 할 수 있나요?
HTML5를 사용하면 모든 요소를 드래그 가능하게 만들 수 있으므로 커서로 요소를 선택하고 드롭 가능한 요소로 정의 된 다른 위치로 드래그 할 수 있습니다. 아래 예에서 이미지를 정사각형으로 드래그 해보세요.
이 기능은 사용자 경험을 단순화하고 간단한 온라인 게임을 만들 수도 있습니다 (예 : 가상 체스 조각을 드래그 앤 드롭 할 수 있음). 요소를 드래그하면 투명 복제본이 마우스 버튼을 놓아서 드롭 할 때까지 커서와 함께 이동합니다.
기술적으로 드래그 앤 드롭은 HTML5에 추가 된 JavaScript API입니다. 따라서이 기능을 사용하려면 최소한 기본 스크립팅 지식이 있어야합니다.
HTML5 드래그 앤 드롭 이벤트
아래 표에서 드래그 앤 드롭 기능과 관련된 모든 이벤트 :
| 이벤트 | 설명 |
|---|---|
| 드래그 | 요소를 드래그하는 동안 커서가 이동합니다. |
| drop | 드래그 프로세스가 완료됩니다. |
| dragstart | 커서가 요소를 선택하고 끌기를 시작합니다. |
| dragend | 마우스 버튼을 놓고 요소를 드롭합니다. |
| dragenter | 커서가 대상 요소로 들어감 |
| dragleave | 커서가 대상 요소에서 나옴 |
| 드래그 오버 | 커서가 대상 요소 위로 이동 |
드래그 앤 드롭에 대한 단계별 설명
HTML5 드래그 앤 드롭 코딩은 JS에 스크립팅이 포함되어있어 처음에는 상당히 복잡해 보입니다. 그러나 이해하기 쉽도록 프로세스의 각 부분을 연구 해 보겠습니다.
드래그 가능한 요소
먼저 드래그하려는 요소에 HTML5 draggable 속성이 적용되고 해당 값이 true로 설정 됨 :
드래그
그런 다음 개체를 드래그 한 후 수행 할 작업을 정의합니다. 다음을 호출하여 수행 할 수 있습니다. dragstart 이벤트에 대한 이벤트 핸들러 및 실행할 함수를 정의합니다.
드래그 된 데이터의 값과 데이터 유형은
방법 :
드롭
HTML5 드래그 가능한 데이터는 이벤트 핸들러를 dragover 이벤트에 연결하여 지정합니다.
요소 및 데이터는 기본적으로 다른 요소에 드롭됩니다. 즉, 요소의 event.preventDefault() 메소드를 사용한 기본 동작 :
drop 이벤트는 HTML5 드래그 가능 데이터를 놓을 때 발생합니다. ondrop 이벤트 핸들러에 의해 호출됩니다.
최종 코드 : 예제
기본적으로 다음을 수행 할 수있는 코드가 필요합니다. 다음 네 단계를 수행합니다.
-
preventDefault()를 호출하여 데이터와 관련된 웹 브라우저의 기본 작업을 방지합니다. - 데이터 가져 오기
dataTransfer.getData()메소드 - 드래그 요소를 드롭 요소에 부착
아래 예 :
HTML5 드래그 앤 드롭 : 유용한 팁
- 파일, 링크, 이미지 및 텍스트를 포함하되 이에 국한되지 않는 다양한 유형의 요소를 드래그 할 수 있습니다.
- 한 번에 여러 요소를 드래그 할 수도 있습니다. 그러나 일관성을 위해 모두 동일한 형식으로 유지하는 것이 좋습니다.
- 사용자 입력을 허용하는 양식 요소는 기본적으로 놓을 수있는 영역이 될 수 있습니다.