JavaScript：ドラッグアンドドロップサンプル
Last-modified: 2013-12-12 (木) 16:42:13 (3385d)
Top / JavaScript：ドラッグアンドドロップサンプル
JavaScript?：ブラウザ間のドラッグアンドドロップサンプル †
ブラウザ上のテキスト、リンク等を選択し、ドラッグアンドドロップしたときに取れるtypesとデータをドロップ領域に表示する＋consoleに出力するサンプルです。
ポイントは以下の通り
- onDropのイベントで、event.dataTransferを使用します。
- event.dataTransfer.typesから、取得可能なデータのtypeが配列で取れる
- event.dataTransfer.getData(type)でデータが取れる
ちなみに、ファイルとかもドロップできますが、データは出力されませんｗ
コード †
こんな感じです。
<!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>
