HTML5でドラッグ＆ドロップ

どうもinappeです。
今回はHTMLでドラッグ＆ドロップについてです。
コードとして必要な要素は

ドラッグできる要素。
- draggable="true" の属性を指定。
- ondragstartイベントで，ドラッグするデータの保管。
ドロップできる要素。
- ondragoverイベントで，ドロップの許可。
- ondropイベントで，ドロップ時のデータ取り出し。

サンプルコード（コピペ）

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル１</title>
<style>
div {
  border : solid 1px black;
  margin : 10px;
  padding : 10px;
  background-color : yellow;
}
</style>

<h3>HTML5のドラッグドロップのサンプル１</h3>

<!-- ドラッグできる要素 -->
<div draggable="true" ondragstart="f1(event)">リンゴ</div>
<div draggable="true" ondragstart="f1(event)">バナナ</div>
<div draggable="true" ondragstart="f1(event)">みかん</div>

<!-- ドロップできる要素 -->
<div
  ondragover="f2(event);"
  ondrop="f3(event)">
  フルーツバスケット<br>
  （果物をドロップできます）
</div>

<script>

// ドラッグ開始時のイベント
function f1( event )
{
    // ドラッグ要素の中身の文字列を取得
    var s = event.target.innerHTML;
    
    // ドラッグイベントに文字列を格納
    event.dataTransfer.setData("text/plain", s);
}

// ドロップ受け付け判定
function f2( event )
{
    // ドロップを受け付ける
    // （イベントのデフォルト動作であるドロップの拒否を行なわない）
    event.preventDefault();
    
    // これが無いとドロップ不可能になる。
}

// ドロップ処理
function f3(event)
{
    // ページの遷移を防止
    //（これがないとドラッグ内容の文字列へブラウザが遷移する）
    event.preventDefault();

    // イベントに格納された文字列データを取り出し
    var s = event.dataTransfer.getData("text/plain");
    
    // 表示
    alert(s);
}

</script>

画面外からのドラッグ&ドロップ

<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML5・ドラッグ＆ドロップのサンプル２</title>
<style>
div {
  border : solid 1px black;
  padding : 10px;
  background-color : yellow;
}
</style>


<h3>HTML5のドラッグドロップのサンプル２</h3>


<div
  ondragover="f1(event);"
  ondrop="f2(event)">
  ここにファイルをドロップしてね
</div>


<script>

// ドロップ受け付け判定
function f1( event )
{
    // ドロップを受け付ける
    event.preventDefault();
}


// ドロップ処理
function f2(event)
{
    // ページの遷移を防止
    //（これがないとドラッグ内容の文字列へブラウザが遷移する）
    event.preventDefault();

    // イベントに格納されたファイルを取り出し
    var f = event.dataTransfer.files[0];
    
    // ファイル情報を表示
    alert(
        "ファイル名：" + f.name 
        + "\nファイルの型：" + f.type 
        + "\nファイルサイズ：" + f.size / 1000 + " KB "
        + "\n最終更新日時：" + f.lastModifiedDate
    );
    
    // ファイル内容の読み取り
    var reader = new FileReader(); // ファイルを読み取るオブジェクト
    reader.onloadend = function(){
        alert("ファイルの内容：" + reader.result);
    };
    reader.readAsDataURL( f );
}

</script>

HTML5超便利ｗ
対応ブラウザの問題も若干ありますがそこは無視してしまっても…
丁度、インターンで画像uploadなど実装しているので画面外からのドラッグ&ドロップでも画像upload出来るように実装したいですね。
ブログネタなさすぎて死にたくなっているので来週は何か書籍を買って本格的にできればなと密かに決意させていただきます|дﾟ)
今回はこのあたりでｗ