html5でドラッグ&ドロップの処理

html5

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思ってメモ。

イベントの種類とデフォルトの動作をキャンセル

ドラッグ&ドロップを実現しようにもブラウザにはドロップされたものを表示するというデフォルトの動作があるので、そいつをキャンセルする必要がある。ただしドラッグを開始する「dragstart」は特にキャンセルする必要はない。

とくにhtml5(javascript)でドラッグ&ドロップを実現する場合は、「dragover」のイベントをキャンセルするのは必須のようです。

ドラッグ&ドロップを行うには下記のようなイベントが主にあります。

ドラッグ&ドロップの実装

最小限のコードで説明を書いていこう。説明するところは①~③まで。

①ドラッグプロパティを設定する

ドラッグさせるにはドラッグ対象となる要素のプロパティでdraggableプロティをtrueにする必要がある
ただし、あくまでドラッグさせるだけなので、ドロップする時の処理やデータを渡すにはjavascriptの処理が必要になる。

②ドロップ先に渡すデータをセットする

ドラッグしている要素のデータはEventオブジェクトを介して行うのでEventオブジェクトのdataTransferオブジェクトのsetData()メソッドを利用する

setData()メソッドの引数は「setData(type,data)」となっていてkeyはtextやurlがある。
参考サイト:ドラッグ&ドロップで要素間でデータを受け渡すには

③ドロップされたデータを取得する

ドロップ先で要素のデータを受け取るには同じくEventオブジェクトのdataTransferオブジェクトのgetData()メソッドを利用する

getData()メソッドの引数は「getData(type)」となっていてkeyはtextやurlがあり、ドロップされたデータと同じtypeのデータを取得できる。

参考になったサイト

上記を基にサンプルを作った

一応、dragenterとdragleave時はドラッグエリアの背景色を変えてます。