HTML入門 | HTML5 API | Drag and Drop

Drag and Drop API

Drag and Drop APIは、Webページ内の要素をユーザーが自由にドラッグできるように設定する。 HTML5以前にこのような機能を実装するには、非常に多くの複雑なスクリプトを作成する必要があった。 しかしHTML5では、ドラッグ&ドロップ(drag and drop)機能が標準勧告に含まれ、簡単に使用できるようになった。 現在の主要Webブラウザはすべてこの機能をサポートしているため、Webページ内のすべての要素はドラッグできる。

Drag and Drop APIをサポートする主要Webブラウザのバージョンは次のとおりである。

Drag and Dropイベント

マウスでオブジェクト(object)をドラッグしてドロップするまで、複数段階のイベントが順番に発生する。

次の表は、ドラッグ&ドロップ時に発生するイベントを順番に示している。

Drag and Dropイベント用のすべてのイベントリスナーメソッド(event listener method)はDataTransferオブジェクトを返す。
このように返されたDataTransferオブジェクトは、ドラッグ&ドロップ動作に関する情報を持つ。

draggable属性

Webページ内のすべての要素は、draggable属性を使用してドラッグ可能なオブジェクト(draggable object)に変換できる。

ondragstart属性

ドラッグ可能なオブジェクトにした後は、ondragstart属性を通じてDataTransferオブジェクトのsetData()メソッドを呼び出す。
setData()メソッドは、ドラッグされる対象オブジェクトのデータ(data)とタイプ(data type)を設定する。

ondragover属性

ondragover属性は、ドラッグされる対象オブジェクトをどの要素の上に置けるかを設定する。
基本的にHTML要素は他の要素の上に配置できない。
したがって、他の要素の上に配置できるようにするには、置く場所にある要素の既定動作を止める必要がある。
この作業はevent.preventDefault()メソッドを呼び出すだけで簡単に設定できる。

ondrop属性

ドラッグしていたオブジェクトをドロップすると、dropイベントが発生する。
ondrop属性を使用して、dropイベントに対する動作を設定できる。

例

function dragEnter(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}