DataTransfer.clearData() - データを削除する

2017/10/11

clearData()は、DataTransferのメソッドです。転送中のデータを削除します。削除するには対象のデータの種類を指定します。この種類は、typesで確認できます。

概要

名前

clearData

所属

IDL

void clearData(optional DOMString format);

仕様書

https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-cleardata

説明

引数(format)には、データの種類を表す文字列を指定する。

種類はtypesで確認できる。"text"は"text/plain"に、"url"は"text/uri-list"と変換して解釈される。

このメソッドは、ドラッグ関連イベントだったらドロップ時に実行しても反映されません。

デモ

DataTransfer.clearData()のデモです。上の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>
<p><textarea>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 dataTransfer = event.dataTransfer ;
	dataTransfer.clearData( "text/plain" ) ;
} ;

element1.ondragstart = callbackFn1 ;

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

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

	var dataTransfer = event.dataTransfer ;
	var types = dataTransfer.types ;

	resultElement.innerHTML = "" ;

	for ( var i=0,l=types.length; l>i; i++ ) {
		var value = dataTransfer.getData( types[i] ) ;
		console.log( types[i], value ) ;
		resultElement.appendChild( document.createTextNode( "type: " + types[i] + "\n" ) ) ;
		resultElement.appendChild( document.createTextNode( "return value: " + value + "\n\n" ) ) ;
	}
} ;

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

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

</body>
</html>