DataTransfer.items - データの一覧
itemsは、DataTransferのプロパティです。転送中のデータの一覧をDataTransferItemListで返します。ファイルやテキストなど、形式の違うデータをまとめて処理できる点で有用です。
概要
- 名前
- items
- 所属
- DataTransfer
- IDL
[SameObject] readonly attribute DataTransferItemList items;
- 仕様書
- https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-items
説明
転送中のデータをDataTransferItemListで返す。
デモ
DataTransfer.itemsのデモです。ローカルファイルや、テキスト、画像要素をドロップして値を比較してみて下さい。なお、ドロップしたファイルが当サイトのサーバーにアップロードされるようなことはありません。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#hoge {
width: 250px ;
text-align: center ;
padding: 24px 12px ;
background-color: blue ;
color: #fff ;
}
textarea { width: 250px ; height: 60px ; font-size: 16px ; }
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<p><textarea>SYNCER</textarea></p>
<p><img src="./image.png" width="120" height="120" draggable="true"></p>
<hr>
<div id="hoge">drop here!</div>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "hoge" ) ;
var callbackFn1 = function ( event ) {
event.preventDefault() ;
} ;
var callbackFn2 = function ( event ) {
event.preventDefault() ;
var dataTransfer = event.dataTransfer ;
var itemList = dataTransfer.items ;
console.log( itemList ) ;
resultElement.innerHTML = "" ;
for ( var i=0,l=itemList.length; l>i; i++ ) {
console.log( itemList[i] ) ;
resultElement.appendChild( document.createTextNode( "[" + i + "] " + itemList[i] + "\n" ) ) ;
resultElement.appendChild( document.createTextNode( "\tkind: " + itemList[i].kind + "\n" ) ) ;
resultElement.appendChild( document.createTextNode( "\ttype: " + itemList[i].type + "\n\n" ) ) ;
}
} ;
element.ondragover = callbackFn1 ;
element.ondrop = callbackFn2 ;
var resultElement = document.getElementById( "result" ) ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● 50+ | × | ● | × | ● 12+ | × | ● 4.4+ |
関連記事
- DataTransferItemList
- DataTransferItemListは、転送中のデータの一覧を管理するための機能を備えたインターフェイスです。
- DataTransferItem.getAsString()
- getAsString()は、DataTransferItemのメソッドです。データを文字列として取得します。データの種類(kind)が"string"である必要があります。取得したデータはメソッドの返り値として返すのではなく、引数のコールバック関数に渡されます。
- DataTransfer.getData()
- getData()は、DataTransferのメソッドです。転送中のデータの内容を取得します。取得するには対象のデータの種類を指定します。この種類は、typesで確認できます。
- DataTransfer.files
- filesは、DataTransferのプロパティです。転送中のファイルの一覧をFileListで返します。