DOM

：

：

DataTransfer.items プロパティ

　編集：2022.10.20 by T.A.

[Edge]。読取専用。→、、

ドラッグ操作でのデータ転送項目のリストを DataTransferItemList で示します。

リストには操作中の項目ごとに 1 つの項目が含まれており、操作に項目がなかった場合はリストは空になります。

構文
DataTransfer.items
DataTransfer DataTransfer。
値

ドラッグ操作でドラッグされる項目を表す DataTransferItem オブジェクトを含む DataTransferItemList オブジェクトで、ドラッグされるオブジェクトごとに 1 つのリスト項目があります。

ドラッグ操作にデータがない場合、リストは空になります。

例
drop イベントと items

HTML： 

<IMG src="../../Sample/Picture.jpg"><BR>
<DIV id=IdTest contenteditable>ここにドロップ操作をしてみて…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){
  D=eve;
  DA=eve.dataTransfer.items;  //＝[object]：[object DataTransferItemList]。IMG要素をDIV内にドロップした。
	//length＝[number]：0
	//add＝[function]：function add() { [native code] }
	//clear＝[function]：function clear() { [native code] }
	//remove＝[function]：function remove() { [native code] }
  IdLog.innerHTML=IdLog.innerHTML+eve.dataTransfer.items.length+" ";
}
document.ondrop=Job;

IMG要素をドロップしても、エクスプローラーから画像ファイルをドロップしても何も得られなかった。

dragstart、dragend、drag イベントでもだめだった。

テストした結果、どうやら、イベント発生中でないと得られないようです。

JavaScript： 

WObj=window.open("", "Test");  //データ表示場所を開く。
function Job(eve){  //dragstart イベントの処理：
  D=eve;
  DA=eve.dataTransfer.items;
  IdLog.innerHTML=IdLog.innerHTML+eve.dataTransfer.items.length+"：<BR>";
  for(I=0; I<eve.dataTransfer.items.length; I++){
    WObj.document.write(GetOL(eve.dataTransfer.items[I]));
  }
}
document.ondragstart=Job;

↑これで表示された内容。IMG要素をドラッグした。 

＝[object]：[object DataTransferItem]
kind＝[string]：string
type＝[string]：text/uri-list
getAsFile＝[function]：function getAsFile() { [native code] }
getAsString＝[function]：function getAsString() { [native code] }
webkitGetAsEntry＝[function]：function webkitGetAsEntry() { [native code] }
getAsFileSystemHandle＝[function]：function getAsFileSystemHandle() { [native code] }

＝[object]：[object DataTransferItem]
kind＝[string]：file
type＝[string]：image/jpeg
getAsFile＝[function]：function getAsFile() { [native code] }
getAsString＝[function]：function getAsString() { [native code] }
webkitGetAsEntry＝[function]：function webkitGetAsEntry() { [native code] }
getAsFileSystemHandle＝[function]：function getAsFileSystemHandle() { [native code] }

＝[object]：[object DataTransferItem]
kind＝[string]：string
type＝[string]：text/html
getAsFile＝[function]：function getAsFile() { [native code] }
getAsString＝[function]：function getAsString() { [native code] }
webkitGetAsEntry＝[function]：function webkitGetAsEntry() { [native code] }
getAsFileSystemHandle＝[function]：function getAsFileSystemHandle() { [native code] }

→window.open()、document.write()。GetOL()。

テスト