드래그 앤 드롭 프로젝트에서 데이터 전송 API 사용

데이터 전송 API는 HTML5 드래그 앤 드롭 API 및 클립보드 이벤트의 일부입니다. 페이지 내 상호 작용에 사용되며 시작 지점(항목이 드래그되는 위치)에서 끝점(항목이 드롭되는 위치)으로 데이터를 전송하는 데 사용할 수 있습니다.

데이터 전송 API에는 두 가지 방법이 있습니다.

datatransfer.setData()

datatransfer.getData()

datatransfer.addElement()

datatransfer.clearData()

dataTransfer.setDragImage

Firefox 브라우저에는 데이터 전송 API에 대한 관례적인 방법이 있습니다. 여기에는 다음이 포함됩니다.

moz.setDataAt()

moz.getDataAt()

moz.clearDataAt()

moz.TypesAt()

DataTransfer.setData()

dragStart 이벤트가 호출되면 이 메서드를 사용하여 데이터를 지정된 데이터 및 유형으로 설정할 수 있습니다. 드래그 개체에 추가할 데이터 유형을 나타내는 문자열과 끌기 개체에 추가할 데이터를 나타내는 문자열인 2개의 매개 변수를 허용합니다.

dataTransfer.setData(format, setData)

DataTransfer.getData()

이 메서드는 지정된 유형의 끌기 데이터를 검색합니다. 하나의 매개변수만 허용하며 dragenter(), dragover(), dragleave(), drop()과 같은 드래그 이벤트와 함께 사용됩니다. 드래그한 데이터는 소스 요소에서 검색할 수 없습니다.

dataTransfer.getData(format)

DataTransfer.addElement()

이 메서드는 요소를 드래그 소스로 설정합니다. 드래그 이벤트와 dragend 이벤트가 발생하면 요소가 추가됩니다.

dataTransfer.addElement()

DataTransfer.clearData()

이 메서드는 지정된 유형의 데이터를 제거하며 dragstart 이벤트가 발생할 때만 호출할 수 있습니다. 여기에는 하나의 선택적 매개변수가 있으며 해당 매개변수가 지정되면 해당 유형의 데이터만 제거되고 그렇지 않으면 모든 데이터 유형이 제거됩니다.

DataTransfer.setDragImage()

기본적으로 dragstart 이벤트가 발생하면 드래그 대상에서 이미지가 생성되지만 이 방법을 사용하여 사용자 지정 이미지를 생성할 수 있습니다. 이미지 요소, 수평 오프셋, 수직 오프셋의 3가지 매개변수를 허용합니다.

dataTransfer.setDragImage(imgElement, xOffset, yOffset)

데이터 전송 API의 속성

드롭이펙트

효과 허용됨

파일

유형

Firefox 브라우저의 특정 속성에는 다음이 포함됩니다.

모즈커서

mozItemCount

모즈소스노드

mozUserCancelled

드롭이펙트

이 속성은 허용되는 끌어서 놓기 작업 유형을 지정하고 끌어서 놓기 작업 유형이 허용되지 않는 경우 끌어온 콘텐츠를 놓지 않습니다. 드롭 효과 속성의 값은 표시되는 커서의 스타일에도 영향을 줍니다. 허용되는 전송 유형은 dragstart 이벤트에 지정되고 dragenter 및 dragover 이벤트에서 수정됩니다.

효과허용

이 속성은 끌어서 놓기 작업 중에 허용되는 효과를 지정합니다. 드래그 소스에 대해 원하는 드래그 효과를 설정하려면 이 속성을 dragstart 이벤트에서 설정해야 합니다. dragenter 및 dragover 이벤트 내에서 이 속성은 dragstart 이벤트 중에 할당된 값으로 설정됩니다.

파일

파일 속성은 끌기 작업의 파일 목록입니다.

유형

이 속성은 현재 끌어서 놓기 작업의 첫 번째 항목에 사용할 수 있는 데이터 형식이 포함된 목록 컬렉션을 반환합니다.

요약

Data Transfer API에 대한 자세한 설명은 HTML Drag and Drop API을 참조하십시오.