HTML5 ドラッグ＆ドロップ（Drag と Drop）
ドラッグ＆ドロップ（Drag と Drop）は HTML5 標準の構成要素です。
将 example.comアイコンを四角い枠にドラッグします。
ドラッグ＆ドロップ
ドラッグ＆ドロップは、オブジェクトを掴んで別の位置にドラッグする一般的な機能です。
HTML5 では、ドラッグ＆ドロップは標準の一部であり、あらゆる要素をドラッグ＆ドロップできます。
ブラウザサポート
Internet Explorer 9+、Firefox、Opera、Chrome、Safari はドラッグをサポートしています。
注意:Safari 5.1.2 はドラッグをサポートしていません。
HTML5 ドラッグ＆ドロップの例
次の例は、簡単なドラッグ＆ドロップの例です：
例
試してみる »
複雑に見えるかもしれませんが、ドラッグ＆ドロップイベントの各部分を個別に調べることができます。
要素をドラッグ可能に設定する
まず、要素をドラッグ可能にするために、draggable 属性を true に設定します：
何をドラッグするか - ondragstart と setData()
次に、要素がドラッグされたときに何が起こるかを指定します。
上記の例では、ondragstart 属性が関数 drag(event) を呼び出し、ドラッグされるデータを指定しています。
dataTransfer.setData() メソッドは、ドラッグされるデータのデータ型と値を設定します：
{
ev.dataTransfer.setData("Text",ev.target.id);
}
Text は、ドラッグオブジェクトに追加されるドラッグデータの型を表す DOMString です。値はドラッグ可能な要素の id ("drag1") です。
どこに置くか - ondragover
ondragover イベントは、ドラッグされたデータをどこに配置するかを指定します。
デフォルトでは、データ/要素を他の要素に配置することはできません。配置を許可するには、要素のデフォルトの処理を阻止する必要があります。
これは、ondragover イベントの event.preventDefault() メソッドを呼び出すことで行います：
ドロップする - ondrop
ドラッグされたデータがドロップされると、drop イベントが発生します。
上記の例では、ondrop 属性が関数 drop(event) を呼び出します：
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
コードの説明：
- preventDefault() を呼び出して、ブラウザによるデータのデフォルト処理を回避します（drop イベントのデフォルト動作はリンクとして開くことです）
- dataTransfer.getData("Text") メソッドでドラッグされたデータを取得します。このメソッドは、setData() メソッドで同じ型として設定されたデータを返します。
- ドラッグされたデータは、ドラッグされた要素の id ("drag1") です。
- ドラッグされた要素をドロップ要素（ターゲット要素）に追加します。
その他の例
画像を前後にドラッグ＆ドロップする
2 つの <div> 要素間で画像をドラッグ＆ドロップする方法。