.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
DataTransfer interface
.dataTransfer
•
드래그 앤 드롭 때 가져온 데이터를 가지는 객체
.dropEffect
•
[드롭 작업의 효과를 나타내는 문자열]
•
드롭 대상 요소에 대한 드롭 효과를 나타내는 속성
•
드롭 대상 요소의 dragover 이벤트 핸들러에서 설정
•
dragover 이벤트 핸들러 내에서 event.dataTransfer.dropEffect에 값을 할당하여 설정
속성값 | 설명 |
none | 드롭이 허용되지 않음을 표시
일반적으로 드롭 대상이 드롭되지 않도록 하려는 경우에 사용 |
copy | 드롭된 데이터의 복사본 생성
원본 데이터를 변경하지 않고 복사본을 만들어서 드롭 |
move | 드롭된 데이터를 이동
이 경우 원본 데이터가 대상에서 제거 |
link | 드롭된 데이터에 대한 참조 생성
드롭 대상은 해당 데이터를 사용할 수 있도록 참조 생성 |
.effectAllowed
•
[요소에 대한 드래그 앤 드롭 작업의 허용된 효과(Effect)를 나타내는 문자열]
•
드래그 소스 요소에서 허용되는 드래그 효과를 나타내는 속성
•
dragstart 이벤트 핸들러 내에서 설정
none | 어떤 드롭 효과도 허용 금지 |
copy | 복사 드롭 효과 허용 |
move | 이동 드롭 효과 허용 |
link | 링크 드롭 효과 허용 |
copyMove | 복사 및 이동 드롭 효과 모두 허용 |
copyLink | 복사 및 링크 드롭 효과 모두 허용 |
linkMove | 링크 및 이동 드롭 효과 모두 허용 |
all | 모든 드롭 효과 허용 |
.setData(format, data)
•
드래그되는 데이터를 설정하는 메서드
◦
format : 설정할 데이터의 형식을 나타내는 문자열
◦
data : 실제 설정할 데이터
•
해당 매서드로 드래그된 데이터를 설정하고, 해당 데이터를 드래그 앤 드롭 작업의 일부로 전달
.getData(format)
•
드롭 대상에서 데이터를 가져오는 메서드
◦
format : 가져올 데이터의 형식을 나타내는 문자열
◦
format에 해당 형식에 맞는 데이터가 없을 경우 빈 문자열을 반환
.clearData([format])
•
지정된 형식의 드래그 데이터를 제거하는 메서드
◦
format : 제거할 데이터 형식을 지정
◦
format을 지정하지 않으면 모든 드래그 데이터를 제거
