JavaScript: Drag & Drop API のイベントやオブジェクト
HTML5 Drag & Drop API を使うと、HTML要素だけでなく、 テキストやファイルもドラッグ&ドロップして、HTML要素に渡すことができます。
このページでは、 Drag & Drop API を使用する上での基本事項を説明します。
要素をドラッグ可能にする
ドラッグ&ドロップを行うためには、まず要素をドラッグ可能な状態にする必要があります。 そのための属性が「draggable 属性」です。 true がドラッグ可能で、false がドラッグ不可となります。
例えば、div 要素をドラッグ可能にする場合には次のように記述します。
<div draggable="true"></div>
但し、次の要素はデフォルトでドラッグ可能となっていますので、特に指定する必要はありません。
- src 属性が指定されている img 要素
- href 属性が指定させている a 要素
イベント
Drag & Drop API では、発生するイベントが7つあります。
以下のそれぞれのイベントが、ドラッグ側のイベントなのか、ドロップ側のイベントなのかを区別するようにしてください。
イベント名 | 発生タイミング |
---|---|
ドラッグ | |
dragstart | ドラッグ開始時 |
drag | ドラッグ中 |
dragend | ドラッグ終了時 |
ドロップ | |
dragenter | マウスポインタがドロップ要素の内側に入った時 |
dragover | マウスポインタがドロップ要素の内側にある時 |
dragleave | マウスポインタがドロップ要素の内側から出た時 |
drop | 要素にドロップした時 |
ブラウザのデフォルト動作をキャンセル
通常は、ドラッグ&ドロップを行った際に、ブラウザが標準で用意している動作が実行されます。
自分の記述した動作が実行されるようにするためには、ブラウザのデフォルト動作をキャンセルする必要があります。 このためのメソッドが preventDefault() メソッドで、キャンセルする必要があるイベントは 「dragover」イベントと、「drop」イベントです。
ブラウザのデフォルト動作をキャンセルするには、次のように記述します。
document.addEventListener('dragover', function(e){
e.preventDefault();
// 以下、処理があれば記述
}, false);
document.addEventListener('drop', function(e){
e.preventDefault();
// 以下、処理を記述
}, false);
DataTransfer オブジェクト
ドラッグ&ドロップ時のデータの受け渡しにはDataTransfer オブジェクトを利用します。
DataTransfer オブジェクトはドラッグ中の情報を管理していて、 これを利用することでドラッグ側からドロップ側へデータを渡すことができます。
以下にDataTransfer オブジェクトのプロパティとメソッドを記述します。 使用頻度が高いのは setData() メソッドと、getData() メソッドです。
プロパティ/メソッド | 説明 |
---|---|
types | setData() メソッドで設定されたデータ型のリスト |
files | ドラッグされたファイルのリスト |
effectAllowed | ドラッグ側で許可される操作の種類 |
dropEffect | ドロップ側の効果 |
setData(type, data) | データを指定したデータの型(type)で設定 |
getData(type) | データを取得 |
clearData(type) | format で指定されたデータを消去 |
setDragImage(img, x, y) | ドラッグ中に表示される画像を設定。 |
addElement(element) | ドラッグ側の要素を追加 |
type | 説明 |
---|---|
text | プレーンテキスト |
text/plain | プレーンテキスト |
text/html | HTML テキスト |
text/uri-list | URL リスト |
実際のコード例は次の記事等を参考にしてください。
Drag & Drop API で画像を移動する