HTML5のDrag & Drop API をつかってみた。

JavaScript

普段インターネットみてて、便利だなーって思ってた画像のドラッグアンドドロップ機能をつかってみたのでちょっとメモしておきます。
HTML5以前から要素のドラッグアンドドロップはできたんですが、
やり方が結構面倒くさかったらしいんです。

HTML5以前のドラッグドロップ

1. onmousedownイベントでmousemoveハンドラとmouseupハンドラを登録する。
2. mousemoveハンドラ…マウスの位置にHTML要素を移動する
3. mouseupハンドラ…mousemove,mouseupのハンドラを削除する。
という具合に。
（コード参照は右下のPlay→STOPボタンより）

drag.js - jsdo.it - share JavaScript, HTML5 and CSS



でも新しいDrag & Drop APIは

HTML5のドラッグドロップ

1. ドラッグ属性を設定（draggable="true" にする）

<img draggable="true" src="~~" />

2. ondropハンドラにドロップ時の動作を登録する。

//drophere（ドロップ領域）にドロップハンドラを追加
drophere.ondrop = function(event) {
  // ブラウザのデフォルト動作をキャンセル
  event.preventDefault();
  /* ここにドロップした時の動作を記述する */
};

こんだけ〜！
。。実際onDragoverハンドラとかも登録するけど、、
（コード参照は右下のPlay→STOPボタンより）

Drag&Drop API - jsdo.it - share JavaScript, HTML5 and CSS

画像をドラッグ＆ドロップするのって結構きもちいいので
つかう機会あれば使ってみたいです。