待ちに待ったWebでドラッグ＆ドロップ！
こんにちは、宗定洋平（@yoheiMune）です。
今日は、HTML5で使えるようになったドラッグ＆ドロップを使ってみたので、ブログに書きたいと思います。
http://html5learner.appspot.com/html/dnd/DnDinPage.html
ドラッグ＆ドロップの可能性
私はドラッグ＆ドロップがWebで出来るようになった事は凄い事だと思います。デスクトップアプリケーションでは出来てWebで出来なかったユーザーインターフェース。それが実現出来るようになったから。
Webがより便利に使えるようになるんじゃないかと思います。使い方を色々と創造出来て楽しい技術です。
HTMLで設定する事
ドラッグ＆ドロップに使いたいElementに、draggable="true"という要素を追加するだけ。IMGタグやＡタグはdraggable="true"と記載しなくても、最初からドラッグ＆ドロップできる。
JavaScriptで記載する事
JavaScriptでは、dragstart、dragenter、dragover、dropというイベントをハンドリングして、ドラッグ＆ドロップの動作を指定します。詳細は上記画面のソースを見てみてください。
最後に
バージョンによって、上手く動作しないブラウザがあるかもです。最新版のブラウザなら大体動くはずです。今回はページ内のドラッグ＆ドロップでしたが、次回はデスクトップからファイルをドロップするサンプルとかも調べてみたいなと思います。
最後に、HTML5Learnersも宜しくお願いします。
