技術情報
[09] ドラッグ&ドロップを使う
HTMLタグの要素にドラッグ&ドロップ関連のイベントを割り当てて制御します。
また、ドラッグしたいHTMLタグは draggable属性値を "true" に設定しなければなりません。デフォルトは "false"です。

ドラッグでは以下のイベントを検知します。
  • dragstart
  • ドラッグを開始した時に発生します。
  • drag
  • ドラッグ中に発生します。
  • dragend
  • ドラッグを終了した時に発生します。

一方、ドロップでは以下のイベントを検知します。
  • dragenter
  • ドラッグ中の要素がドロップ領域に入った時に発生します。
  • dragover
  • ドラッグ中の要素がドロップ領域にある時に発生します。
  • drag
  • leave
    ドラッグ中の要素がドロップ領域から出た時に発生します。
  • drop
  • ドラッグ中の要素がドロップされた時に発生します。

[コード例]
[下の枠内にテキストファイルをドロップしてください]
<div id="file" style="border:#000000 dotted 1px; width:400px; height:200px"></div>
<script>
var Obj = document.getElementById("file");
Obj.addEventListener("dragover", fDragOver, true);
Obj.addEventListener("drop", fDrop, true);

function fDragOver(e)
{
e.preventDefault();
}
function fDrop(e)
{
e.preventDefault();
Obj.innerText = e.dataTransfer.files[0].name;
}
</script>

[表示例]
[下の枠内にテキストファイルをドロップしてください]