HTML5-드래그 앤 드롭
DnD (드래그 앤 드롭)는 복사, 재정렬 및 삭제를 쉽게 해주는 강력한 사용자 인터페이스 개념입니다. 마우스 클릭의 도움으로 항목의. 이를 통해 사용자는 요소 위에서 마우스 버튼을 클릭 한 채로 다른 위치로 드래그 한 다음 마우스 버튼을 놓아 요소를 드롭 할 수 있습니다.
기존 HTML4에서 드래그 앤 드롭 기능을 구현하려면, 개발자는 복잡한 JavaScript 프로그래밍 또는 jQuery 등과 같은 기타 JavaScript 프레임 워크를 사용해야합니다.
이제 HTML 5는 브라우저 제작에 기본 DnD 지원을 제공하는 DnD (Drag and Drop) API를 제공합니다. 코딩이 훨씬 쉽습니다.
HTML 5 DnD는 Chrome, Firefox 3.5 및 Safari 4 등과 같은 모든 주요 브라우저에서 지원됩니다.
드래그 앤 드롭 이벤트
끌어다 놓기 작업의 다양한 단계에서 발생하는 이벤트의 수가 있습니다. 이러한 이벤트는 아래에 나열되어 있습니다-
| Sr.No. | 이벤트 & 설명 |
|---|---|
| 1 |
dragstart 사용자가 개체 드래그를 시작할 때 실행됩니다. |
| 2 |
dragenter 드래그가 발생하는 동안 마우스가 대상 요소 위로 처음 이동하면 시작됩니다. 이 이벤트의 리스너는이 위치에서 드롭이 허용되는지 여부를 나타내야합니다. 리스너가 없거나 리스너가 작업을 수행하지 않는 경우 기본적으로 드롭이 허용되지 않습니다. |
| 3 |
dragover 이 이벤트는 드래그가 발생할 때 요소 위로 마우스를 이동하면 시작됩니다. 대부분의 경우 리스너 중에 발생하는 작업은 dragenter 이벤트와 동일합니다. |
| 4 |
dragleave 이 이벤트는 드래그가 발생하는 동안 마우스가 요소를 떠날 때 시작됩니다. 청취자는 드롭 피드백에 사용되는 강조 표시 또는 삽입 마커를 제거해야합니다. |
| 5 |
drag 개체를 드래그하는 동안 마우스를 움직일 때마다 실행됩니다. |
| 6 |
drop 드래그 작업이 끝날 때 드롭이 발생한 요소에서 드롭 이벤트가 시작됩니다. 리스너는 드래그되는 데이터를 검색하여 드롭 위치에 삽입합니다. |
| 7 |
dragend 사용자가 개체를 드래그하는 동안 마우스 버튼을 놓으면 실행됩니다. |
참고-드래그 이벤트 만 발생합니다. mousemove와 같은 마우스 이벤트는 드래그 작업 중에 발생하지 않습니다.
DataTransfer 객체
모든 드래그 앤 드롭 이벤트에 대한 이벤트 리스너 메소드는 호출 된 읽기 전용 속성이있는 이벤트 객체를 허용합니다 dataTransfer.
event.dataTransfer는 다음과 같이 이벤트와 관련된 DataTransfer 객체를 반환합니다.-
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
DataTransfer 객체는 드래그에 대한 데이터를 보유합니다. 및 드롭 작업. 이 데이터는 아래에 설명 된대로 DataTransfer 객체와 관련된 다양한 속성의 관점에서 검색 및 설정할 수 있습니다.-
| Sr.No. | DataTransfer 속성 및 설명 |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types dragstart 이벤트에 설정된 형식을 나열하는 DOMStringList를 반환합니다. 또한 파일을 드래그하는 경우 유형 중 하나는 “Files”문자열입니다. |
| 4 |
dataTransfer.clearData () 지정된 형식의 데이터를 제거합니다. 인수가 생략 된 경우 모든 데이터를 제거합니다. |
| 5 |
dataTransfer.setData (형식, 데이터) 지정된 데이터를 추가합니다. |
| 6 |
data = dataTransfer.getData (format) 지정된 데이터를 반환합니다. 이러한 데이터가 없으면 빈 문자열을 반환합니다. |
| 7 |
dataTransfer.files 끌어 오는 파일의 FileList를 반환합니다 (있는 경우). |
| 8 |
dataTransfer.setDragImage (element, x, y) 주어진 요소를 사용하여 드래그 피드백을 업데이트하고 이전에 지정된 피드백을 대체합니다. |
| 9 |
dataTransfer.addElement (element) 주어진 요소를 드래그 피드백을 렌더링하는 데 사용되는 요소 목록입니다. |
드래그 앤 드롭 프로세스
다음은 드래그 앤 드롭 작업을 구현하기 위해 수행해야 할 단계-
1 단계-개체를 드래그 할 수 있도록 만들기
다음은 수행 할 단계입니다.-
-
요소를 드래그하려면 해당 요소에 대해 draggable 속성을 true로 설정해야합니다.
-
드래그 스타트에 대한 이벤트 리스너를 설정해야합니다. 드래그되는 데이터를 찢습니다.
-
이벤트 리스너 dragstart는 허용 된 효과 (복사, 이동, 연결 또는 일부 조합)를 설정합니다.
다음은 개체를 드래그 가능하게 만드는 예제입니다. −
다음 결과를 생성합니다. −
2 단계-개체 놓기
드롭을 수락하려면 드롭 대상이 적어도 세 개의 이벤트를 수신해야합니다.
-
드롭 대상이 드롭을 수락할지 여부를 결정하는 데 사용되는 dragenter 이벤트 . 드롭을 수락하려면이 이벤트를 취소해야합니다.
-
사용자에게 표시 할 피드백을 결정하는 데 사용되는 드래그 오버 이벤트입니다. 이벤트가 취소되면 dropEffect 속성 값에 따라 피드백 (일반적으로 커서)이 업데이트됩니다.
-
마지막으로 실제 드롭을 허용하는 드롭 이벤트입니다.
다음은 객체를 다른 객체에 드롭하는 예제입니다. −
다음 결과가 생성됩니다. −