2012/02/14更新

[HTML5] 待ちに待ったWebでドラッグ＆ドロップ！

今日は、HTML5で使えるようになったドラッグ＆ドロップを使ってみたので、ブログに書きたいと思います。

http://www.yoheim.net/labo/html5/dnd/DnDinPage.html

ドラッグ＆ドロップの可能性

私はドラッグ＆ドロップがWebで出来るようになった事は凄い事だと思います。デスクトップアプリケーションでは出来てWebで出来なかったユーザーインターフェース。それが実現出来るようになったから。

Webがより便利に使えるようになるんじゃないかと思います。使い方を色々と創造出来て楽しい技術です。

HTMLで設定する事

ドラッグ＆ドロップに使いたいElementに、draggable="true"という要素を追加するだけ。IMGタグやＡタグはdraggable="true"と記載しなくても、最初からドラッグ＆ドロップできる。

JavaScriptで記載する事

JavaScriptでは、dragstart、dragenter、dragover、dropというイベントをハンドリングして、ドラッグ＆ドロップの動作を指定します。以下に、上記ページのJavaScriptも公開します。

  window.addEventListener("load", function () {
    
    // ドラッグ出来る対象を取得して、ドラッグ開始イベントを設定する。
    var elements = document.querySelectorAll("#srcarea [class=item]");
    for (var i = 0; i < elements.length; i++) {
      elements[i].addEventListener("dragstart", function (event) {
        var element = event.target;
        event.dataTransfer.setData("Text", element.id);
        event.stopPropagation();
      }, false);
    }
    
    // ドロップされる場所(dropbox)に各種イベントを設定する
    // preventDefault()を行っているのは、ブラウザの動作を抑制するため。
    var dropbox = document.getElementById("dropbox");

    // ドラッグ中の要素が、dropbox要素内に入ってきた際のイベント
    dropbox.addEventListener("dragenter", function (event) {
      event.preventDefault();
    }, false);

    // ドラッグ中の要素が、dropbox要素外に出て行く時のイベント
    dropbox.addEventListener("dragleave", function (event) {
      dropbox.style.border = "3px solid #ffffff";
      event.preventDefault();
    }, false);

    // ドラッグ中の要素が、dropbox要素内をドラッグされている時のイベント
    dropbox.addEventListener("dragover", function (event) {
      dropbox.style.border = "3px solid #ffffcc";
      event.preventDefault();
    }, false);

    // ドラッグ中の要素が、dropbox要素内にドロップされた際のイベント
    dropbox.addEventListener("drop", function (event) {
      var element = event.target;
      var id = event.dataTransfer.getData("Text");
      var target = document.getElementById(id);
      if (target) {
        var notice = document.getElementById("notice");
        if (notice) {dropbox.removeChild(notice);}
        dropbox.style.border = "3px solid #ffffff";
        dropbox.appendChild(target);
        }
      event.preventDefault();
    }, false);
    
  }, false);

最後に

バージョンによって、上手く動作しないブラウザがあるかもです。最新版のブラウザなら大体動くはずです。今回はページ内のドラッグ＆ドロップでしたが、次回はデスクトップからファイルをドロップするサンプルとかも調べてみたいなと思います。

最後に、HTML5Learnersも宜しくお願いします。