トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

JavaScript:ドラッグアンドドロップサンプル

Last-modified: 2013-12-12 (木) 16:42:13 (3728d)
Top / JavaScript:ドラッグアンドドロップサンプル

JavaScript?:ブラウザ間のドラッグアンドドロップサンプル

ブラウザ上のテキスト、リンク等を選択し、ドラッグアンドドロップしたときに取れるtypesとデータをドロップ領域に表示する+consoleに出力するサンプルです。

ポイントは以下の通り

  • onDropのイベントで、event.dataTransferを使用します。
  • event.dataTransfer.typesから、取得可能なデータのtypeが配列で取れる
  • event.dataTransfer.getData(type)でデータが取れる

ちなみに、ファイルとかもドロップできますが、データは出力されませんw

コード

こんな感じです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Drag & Drop Sample</title>
</head>
<body>
    <div class="page">
        <header>
            <div id="title">
                <h1>Drag & Drop Sample</h1>
            </div>
        </header>
        <section id="main">
	<p>他のブラウザからテキスト、リンク等をドラッグアンドドロップすると、typesと取れるデータを出力します</p>
	ドロップ領域

	<div id="drop" style="width:500; height:500px; padding:10px; border:3px solid" ondragover="onDragOver(event)" ondrop="onDrop(event)" ></div>
	<script type="text/javascript">
	if (navigator.userAgent.match("MSIE")){
		console.log(navigator.userAgent);
	}

	var disp  = document.getElementById("disp");
	function onDrop(event){ 
		var out = "";
		console.log("types         : " + event.dataTransfer.types);
		for(var i = 0 ; i < event.dataTransfer.types.length; i++){
			var type = event.dataTransfer.types[i];
			console.log(type + " : "+ event.dataTransfer.getData(type));
			out = out +  type + " : " + event.dataTransfer.getData(type) + "<br><br>"
		}
		drop.innerHTML = out;
		//console.log(out);
		if (navigator.userAgent.match("MSIE")){
			event.preventDefault();
			return false;
		}
		else{
			event.preventDefault();
		}
		
	}
	function onDragOver(event){ 
		if (navigator.userAgent.match("MSIE")){
			event.preventDefault();
			return false;
		}
		else{
			event.preventDefault();
		}
	}
	</script>
        </section>
        <footer>
        </footer>
    </div>
</body>
</html>