SYNCERのロゴ
アイキャッチ画像

DataTransferItemList.add() - データを追加する

add()は、DataTransferItemListのメソッドです。転送するデータを1つ追加します。既に存在する種類のデータを追加することはできません。

概要

名前
add
所属
DataTransferItemList
IDL
DataTransferItem? add(DOMString data, DOMString type);
DataTransferItem? add(File data);
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransferitemlist-add

説明

引数(data)にFIleを指定すれば、それがデータとして追加される。

文字列で内容を指定できる場合は、第1引数(data)にデータの内容、第2引数(type)にmime typeを指定する。

既にリストにある種類のデータを追加しようとすると、エラーが発生します。

デモ

DataTransferItemList.add()のデモです。textarea要素にはdragstartイベントを設定して、その中でデータの内容を追加するようにしています。コメントアウトを外して様々なパターンを確認してみて下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#fuga {
	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 id="hoge">SYNCER</textarea></p>
<hr>
<div id="fuga">drop here!</div>
<hr>
<div id="result"></div>
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

// drag
var callbackFn1 =  function ( event ) {
	var dataTransferItemList = event.dataTransfer.items ;

//	var file = new File( [new Blob( [ "SYNCER" ], { type: "text/plain" } )],  "1.txt" ) ;
//	dataTransferItemList.add( file ) ;

//	dataTransferItemList.add( "追加されたテキスト", "text/plain" ) ;
	dataTransferItemList.add( "<b>追加されたテキスト</b>", "text/html" ) ;
} ;

element1.ondragstart = callbackFn1 ;

// drop
var callbackFn2 =  function ( event ) {
	event.preventDefault() ;
} ;

var callbackFn3 =  function ( event ) {
	event.preventDefault() ;

	var dataTransferItemList = event.dataTransfer.items ;

	console.log( dataTransferItemList ) ;

	resultElement.innerHTML = "" ;
	resultElement.appendChild( document.createTextNode( dataTransferItemList.length + "個のデータがあります。" + "\n\n" ) ) ;

	for ( var i=0,l=dataTransferItemList.length; l>i; i++ ) {
		console.log( dataTransferItemList[i] ) ;
		resultElement.appendChild( document.createTextNode( "[" + i + "] " + dataTransferItemList[i] + "\n" ) ) ;
		resultElement.appendChild( document.createTextNode( "\tkind: " + dataTransferItemList[i].kind + "\n" ) ) ;
		resultElement.appendChild( document.createTextNode( "\ttype: " + dataTransferItemList[i].type + "\n\n" ) ) ;
	}
} ;

element2.ondragover = callbackFn2 ;
element2.ondrop = callbackFn3 ;

var resultElement = document.getElementById( "result" ) ;
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
50+×× 12+× 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月11日 (水)
コンテンツを公開しました。