DOM

この例は、DataTransfer オブジェクトの getData() メソッドおよび setData() メソッドの使い方を紹介します。

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();
    const data = dropevent.dataTransfer.getData("text");
    dropevent.target.appendChild(document.getElementById(data));
    document.getElementById("drag").style.color = 'black';
}

HTML：

<DIV id=IdTest contenteditable>ここにドロップ操作をしてみて…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript：

function Job(eve){  //drop イベントの処理：
  D=eve;  //＝[object]：[object DragEvent]
詳細
	//isTrusted＝[boolean]：true
	//dataTransfer＝[object]：[object DataTransfer]
	//screenX＝[number]：400
	//screenY＝[number]：321
	//clientX＝[number]：193
	//clientY＝[number]：246
	//ctrlKey＝[boolean]：false
	//shiftKey＝[boolean]：false
	//altKey＝[boolean]：false
	//metaKey＝[boolean]：false
	//button＝[number]：0
	//buttons＝[number]：0
	//relatedTarget＝[object]：null
	//pageX＝[number]：193
	//…

  DA=eve.dataTransfer; //＝[object]：[object DataTransfer]
詳細
	//dropEffect＝[string]：none
	//effectAllowed＝[string]：all
	//items＝[object]：[object DataTransferItemList]
	//types＝[object]：
	//files＝[object]：[object FileList]
	//clearData＝[function]：function clearData() { [native code] }
	//…

  DT1=DA.getData("text/plain");  //＝[string]：cript。「cript」をドロップした。
//  DT1=DA.getData("text");  //formatがこれでもいけた。ヌル値では空文字列が表示された。
  IdLog.innerHTML=IdLog.innerHTML+"●";
}
document.ondrop=Job;

→drop イベント。DataTransfer.getData()。