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

DataTransfer.dropEffect - ドロップ側の操作

dropEffectは、DataTransferのプロパティです。転送データを取り扱う時の、ドロップ側の操作を返します。dragoverイベント、またはdragenterイベントにおいて、値を代入して設定することができます。ドラッグされる要素(effectAllowed)の値と、それを受け取る要素(dropEffect)の値が噛み合わない時、ドロップが発生しません。

概要

名前
dropEffect
所属
DataTransfer
IDL
attribute DOMString dropEffect;
仕様書
https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-dropeffect

説明

値には"copy"、"move"、"link"、"none"の4種類のキーワードを指定できます。初期値は"none"ですが、明示的に"none"を指定した時とは違う点にご注意下さい。下記はドロップが発生するか否かの対応表です。

キーワードによって、ドラッグする要素とドロップされる要素がホバー状態になった時のマウスポインタの形状が違います。デモでご確認下さい。

effectAllowedcopymovelinknonenone (初期値)
none×××××
copy×××
copyLink××
copyMove××
link×××
linkMove××
move×××
all×
uninitialized×

チュートリアル

ドラッグ操作には、ドラッグで動かされる要素(ドラッグ側)と、ドロップでそれを受け入れる側(ドロップ側)の2種類があります。ドラッグ側に設定するのがeffectAllowedで、ドロップ側に設定するのがdropEffectです。例えば下記の場合、ドロップが発生します。

// ドラッグ側
element1.ondragstart = function ( event ) {
	event.dataTransfer.effectAllowed = "copy" ;
}

// ドロップ側
element2.ondragover = function ( event ) {
	event.dataTransfer.dropEffect = "copy" ;
}

例えば下記の場合、ドロップは発生しません。

// ドラッグ側
element1.ondragstart = function ( event ) {
	event.dataTransfer.effectAllowed = "copy" ;
}

// ドロップ側
element2.ondragover = function ( event ) {
	event.dataTransfer.dropEffect = "move" ;
}

デモ

DataTransfer.dropEffectのデモです。上はドラッグで動かす要素、下はドロップで受け取る要素です。上にはそれぞれdragstartイベントで別々のeffectAllowedが、下にはそれぞれdragoverイベントで別々のdropEffectが設定されています。effectAllowedとdropEffectが噛み合わない場合、dropイベントが発生せず、背景色が変更されません。

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

<!DOCTYPE html>
<html>
<head>
<style>
ul#hoge, ul#fuga {
	overflow: hidden ;
	list-style-type: none ;
	margin: 0 ;
	padding: 0 ;
}

ul#hoge li, ul#fuga li {
	box-sizing: border-box ;
	width: calc( 33.3333% - 4px ) ;
	text-align: center ;
	padding: 12px ;
	float: left ;
	border: 1px solid #888 ;
	margin: 2px ;
}

ul#hoge li {
	cursor: pointer ;
}

div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<p>ドラッグで動かす要素 (effectAllowed)</p>
<ul id="hoge">
	<li draggable="true">copy</li>
	<li draggable="true">move</li>
	<li draggable="true">link</li>
	<li draggable="true">copyLink</li>
	<li draggable="true">copyMove</li>
	<li draggable="true">linkMove</li>
	<li draggable="true">all</li>
	<li draggable="true">none</li>
	<li draggable="true">uninitialized</li>
</ul>
<hr>
<p>ドロップで受け取る要素 (dropEffect)</p>
<ul id="fuga">
	<li>copy</li>
	<li>move</li>
	<li>link</li>
	<li>none</li>
	<li id="default">none (初期値)</li>
</ul>
<hr>
<div id="result"></div>
<script>
/** try it! **/
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

// drag
var callbackFn1 =  function ( event ) {
	var dataTransfer = event.dataTransfer ;
	dataTransfer.effectAllowed = event.target.textContent ;
} ;

for ( var i=element1.children.length; i--; ) {
	element1.children[i].ondragstart = callbackFn1 ;
	element1.children[i].addEventListener( "dragstart", function ( event ) { event.dataTransfer.setData( "text", "SYNCER" ) ; } ) ;	// Firefox
}

// drop
var callbackFn2 =  function ( event ) {
	event.preventDefault() ;
	var dataTransfer = event.dataTransfer ;
	if ( event.target.id !== "default" ) dataTransfer.dropEffect = event.target.textContent ;

	console.log( dataTransfer ) ;
	resultElement.innerHTML = "" ;
	resultElement.appendChild( document.createTextNode( "currentTarget: " + event.currentTarget + "(#" + event.currentTarget.id + ")" + "\n" ) ) ;
	resultElement.appendChild( document.createTextNode( "DataTransfer.dropEffect: " + dataTransfer.dropEffect + "\n" ) ) ;
} ;

var callbackFn3 =  function ( event ) {
	event.preventDefault() ;
	event.target.style.backgroundColor = "#fee" ;
	clearTimeout( setTimeoutIds[event.target.textContent] ) ;
	setTimeoutIds[event.target.textContent] = setTimeout( function () {
		event.target.style.backgroundColor = "#fff" ;
	}, 3000 ) ;
} ;

for ( var i=element2.children.length; i--; ) {
	element2.children[i].ondragover = callbackFn2 ;
	element2.children[i].ondrop = callbackFn3 ;
}

var setTimeoutIds = {} ;
/** try it! **/

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

</body>
</html>

サポート状況

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