KoXo 자바스크립트 - 개체(object) - ***

끌어놓기(drag-and-drop) 작업을 위하여 사전에 정의된 클립보드(clipboard)에 접속을 허용한다.

	Script	[propVal=]event.dataTransfer.propName;
	HTML	없다.

특기

dataTransfer 개체는 사용자가 event 개체를 통하여 끌어놓기 작업을 커스터마이징할 수 있게 한다.

dataTransfer 개체는 원본과 목표 이벤트들에 사용된다.
전형적으로 원본 이벤트에서 setData 메서드를 사용하여 이동시키는 데이터의 정보를 제공하고,
목표 이벤트의 getData 메서드를 사용하여 어떤 데이터를 어떤 양식으로 할 것인가를 결정한다.

IE5 부터는 스크립트를 사용할 수 있다.

적용

개체	script	HTML	규격	IE
event	[oVal]=event.dataTransfer	없음	없음	IE5(win16,win32,unix,mac),IE5.5(ce)

object ⇒

dataTransfer⇒

⇒

dataTransfer 설명을 위한 예제

원본 앤커 태그 붙여넣을 목표 지역

결과 표시창

원본 앤커 태그 부분을 드래그해서 반전시키고, 드래그하여 목표 지역에 붙여넣기하라.

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>

object ⇒

dataTransfer⇒

⇒

dropEffect 속성 IE
⇒ 개체에서 끌어놓기 작업의 종류와 디스플레이되는 커서의 형식을 반환하거나 설정한다.

문법: dataTransferObj.dropEffect[=sVal]

코드: document.write(oObj.dropEffect); 결과: oObj.dropEffect=위 설명을 위한 예제에서 끌어놓기하고 여기를 보라

effectAllowed 속성 IE
⇒ 개체에서 데이터 전송 작업이 가능한가를 원본 엘레멘트에 부울값으로 반환하거나 설정한다.

문법: dataTransferObj.effectAllowed[=sVal]

코드: document.write(oObj.sweffectAllowed); 결과: oObj.effectAllowed=위 설명을 위한 예제에서 끌어놓기하고 여기를 보라

object ⇒

dataTransfer⇒

⇒