JavaScript:ドラッグアンドドロップサンプル の変更点
Top / JavaScript:ドラッグアンドドロップサンプル
- 追加された行はこの色です。
- 削除された行はこの色です。
- JavaScript:ドラッグアンドドロップサンプル へ行く。
- JavaScript:ドラッグアンドドロップサンプル の差分を削除
*JavaScript:ブラウザ間のドラッグアンドドロップサンプル [#ncbdeccf] ブラウザ上のテキスト、リンク等を選択し、ドラッグアンドドロップしたときに取れるtypesとデータをドロップ領域に表示する+consoleに出力するサンプルです。 ポイントは以下の通り -onDropのイベントで、event.dataTransferを使用します。 -event.dataTransfer.typesから、取得可能なデータのtypeが配列で取れる -event.dataTransfer.getData(type)でデータが取れる ちなみに、ファイルとかもドロップできますが、データは出力されませんw ***コード [#r5785c55] こんな感じです。 <!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> <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>