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

DragEvent.dataTransfer - 転送中のデータ

dataTransferは、DragEventのプロパティです。ドラッグ操作で転送中のデータをDataTransferで返します。

概要

名前
dataTransfer
所属
DragEvent
IDL
readonly attribute DataTransfer? dataTransfer;
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#dom-dragevent-datatransfer

説明

転送中のデータをDataTransferで返す。

デモ

DragEvent.dataTransferのデモです。ドラッグ操作で要素を動かして、ドロップしてみて下さい。

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

<!DOCTYPE html>
<html>
<head>
<style>
div#hoge, div#fuga {
	width: 250px ;
	text-align: center ;
	padding: 24px 12px ;
	background-color: red ;
	color: #fff ;
}

div#fuga {
	background-color: blue ;
}

div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<div id="hoge" draggable="true">drag me!</div>
<hr>
<div id="fuga">drop here!</div>
<hr>
<div id="result"></div>
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

var callbackFn1 =  function ( event ) {
	event.preventDefault() ;
} ;

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

	var dataTransfer = event.dataTransfer ;

	console.log( dataTransfer ) ;

	resultElement.innerHTML = "" ;
	resultElement.appendChild( document.createTextNode( dataTransfer ) ) ;
} ;

element2.ondragover = callbackFn1 ;
element2.ondrop = callbackFn2 ;

var resultElement = document.getElementById( "result" ) ;
element1.addEventListener( "dragstart", function ( event ) { event.dataTransfer.setData( "text", "SYNCER" ) ; } ) ;	// Firefox
</script>

</body>
</html>

サポート状況

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