DOM

DragEvent.dataTransfer プロパティ

 編集:2022.10.19 by T.A.

[Edge]。読取専用。→

ドラッグ操作のデータを(DataTransfer オブジェクトとして)保持します。

構文
DragEvent.dataTransfer
DragEvent DragEvent

DataTransfer オブジェクト。

ドラッグイベントで

HTML:

<SPAN id=IdLog></SPAN>

JavaScript:

function JobDS(eve){ //dragstart イベントの処理:
  D=eve;  //TEXTAREA内の「ipt」を範囲指定してドラッグ、同じ場所にドロップした。
  D1=D.dataTransfer.getData('text/plain');  //=[string]:ipt
  IdLog.innerHTML=IdLog.innerHTML +"●";
}
function JobDE(eve){ //dragend イベントの処理:
  DA=eve; //
  DA1=D.dataTransfer.getData('text/plain');  //=[string]:
  IdLog.innerHTML=IdLog.innerHTML +"○";
}
function JobDD(eve){ //drop イベントの処理:
  DD=eve; //
  DD1=D.dataTransfer.getData('text/plain');  //=[string]:
  IdLog.innerHTML=IdLog.innerHTML +"Drop ";
}
document.ondragstart=JobDS;
document.ondragend=JobDE;
document.ondrop=JobDD;

event.dataTransfer:

//D.dataTransfer=[object]:[object DataTransfer]
詳細//dropEffect=[string]:copy //effectAllowed=[string]:uninitialized //items=[object]:[object DataTransferItemList] //types=[object]: //files=[object]:[object FileList] //clearData=[function]:function clearData() { [native code] } //getData=[function]:function getData() { [native code] } //setData=[function]:function setData() { [native code] } //setDragImage=[function]:function setDragImage() { [native code] }

以下を表示:

D.dataTransfer.getData('text/plain')  //=[string]:

何も得られなかった。

結果:dragstart で event.dataTransfer.getData('text/plain') でデータが得られた。


テスト