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) ドラッグ側の要素を追加
次に、setData() メソッドと getData() メソッドで指定できる主なデータ型を記述します。
type説明
textプレーンテキスト
text/plainプレーンテキスト
text/htmlHTML テキスト
text/uri-listURL リスト

実際のコード例は次の記事等を参考にしてください。
Drag & Drop API で画像を移動する

JavaScript入門