DataTransfer.getData()
DataTransfer.getData()
메소드는 특정 형태를 위해 (DOMString
로) 끌어낸 데이터를 회수한다. 가령, 끌어내는 동작이 데이터를 포함하지 않는다면, 이 메소드는 빈 문자열을 반환한다.
예시 데이터 형식으로는 text/plain
와 text/uri-list
이 있다.
구문
dataTransfer.getData(format);
매개변수
format
-
회수할 데이터 형식을 나타내는
DOMString
반환 값
예제
이 예시는 DataTransfer
(en-US) 객체의 getData()
와 setData()
(en-US) 메소드의 사용을 보여준다.
HTML 내용
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS 내용
#div1, #div2 {
width:100px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
}
JavaScript 내용
function allowDrop(allowdropevent) {
allowdropevent.target.style.color = 'blue';
allowdropevent.preventDefault();
}
function drag(dragevent) {
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = 'green';
}
function drop(dropevent) {
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = 'black';
}
결과
명세
Specification |
---|
HTML Standard # dom-datatransfer-getdata-dev |
브라우저 호환성
BCD tables only load in the browser