끌어놓기(drag-and-drop) 작업을 위하여 사전에 정의된 클립보드(clipboard)에 접속을 허용한다.
|
Script | [propVal=]..propName; |
| HTML | 없다. |
dataTransfer 개체는 사용자가 event 개체를 통하여 끌어놓기 작업을 커스터마이징할 수 있게 한다.
dataTransfer 개체는 원본과 목표 이벤트들에 사용된다.
전형적으로 원본 이벤트에서 setData 메서드를 사용하여 이동시키는 데이터의 정보를 제공하고,
목표 이벤트의 getData 메서드를 사용하여 어떤 데이터를 어떤 양식으로 할 것인가를 결정한다.
IE5 부터는 스크립트를 사용할 수 있다.
| 개체 | script | HTML | 규격 | IE |
|---|
설명을 위한 예제
|
원본 앤커 태그
붙여넣을 목표 지역
결과 표시창 |
|
|
원본 앤커 태그 부분을 드래그해서 반전시키고, 드래그하여 목표 지역에 붙여넣기하라. event.dataTransfer.setData('URL',sourceObj.href);에서 원본 개체의 주소를 URL로 전송함을 설정한다.event.dataTransfer.getData('URL');에서 받는 데이터를 주소(URL)로 받는다. |
|
<SCRIPT>
UrlStr=oObj='';
function dragStart(){
event.dataTransfer.setData('URL',sourceObj.href);
oObj=event.dataTransfer;
str='<DL><DT>ondragstart<DD>oObj.dropEffect='+oObj.dropEffect+'</DD>';
str+='<DD>oObj.effectAllowed='+oObj.effectAllowed+'</DD>';
}
function FinishDrag(){
targetObj.innerText=event.dataTransfer.getData('URL');
oObj=event.dataTransfer;
str+='<DT>ondragenter<DD>oObj.dropEffect='+oObj.dropEffect+'</DD>'
swdropEffect.innerText=oObj.dropEffect;
str+='<DD>oObj.effectAllowed='+oObj.effectAllowed+'</DD></DL>';
sweffectAllowed.innerText=oObj.effectAllowed;
showA.innerHTML=str;
}
</SCRIPT>
<DIV stype=padding:5>
<A id="sourceObj" href="#sampleJump" onclick="return(false)" ondragstart="dragStart()"
style="border:solid 1 blue;padding:3">원본 앤커 태그</A>
<SPAN style=width:1em></SPAN>
<SPAN id=targetObj ondragenter="FinishDrag()" style="border:solid 1 blue;padding:3">붙여넣을 목표 지역</SPAN>
</DIV>
<DIV id=showA style=margin-top:5;padding:3;color:blue>결과 표시창</DIV>
|
|