HTML5 ドラッグ＆ドロップ (Drag and Drop)

Volardev 編集部 April 12, 2026

1. ドラッグ＆ドロップの基本

ドラッグ＆ドロップ (Drag and Drop) は、非常に一般的な機能です。これは、オブジェクトを「掴んで」別の場所に移動させる操作を指します。

HTML5 では、あらゆる要素をドラッグ可能にする標準的な API が導入されました。

2. ブラウザのサポート状況

各ブラウザにおける Drag and Drop API のサポート状況は以下の通りです。

API	Chrome	Edge	Firefox	Safari	Opera
Drag and Drop	4.0+	9.0+	3.5+	6.0+	12.0+

3. HTML ドラッグ＆ドロップの具体例

以下は、画像を別の <div> 要素内にドラッグするシンプルなサンプルコードです。

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(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));
}
</script>
</head>
<body>

<p>画像を下の長方形の中にドラッグしてください：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

一見複雑に見えるかもしれませんが、各ステップを分解して解説していきます。

4. 要素をドラッグ可能にする

まず、要素をドラッグできるようにするには、その要素の draggable アトリビュートを true に設定する必要があります。

<img draggable="true">

5. 何をドラッグするか - ondragstart と setData()

次に、要素がドラッグされたときに何が起こるかを定義します。

この例では、ondragstart イベントが発生した際に drag(event) ファンクションが呼び出されます。この関数内で、ドラッグされるデータの内容を指定します。

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

dataTransfer.setData()メソッドは、ドラッグするデータのタイプ（ここでは "text"）と、その値（ドラッグされる要素の ID）をセットします。

6. どこにドロップするか - ondragover

ondragover イベントは、ドラッグされたデータがどこにドロップできるかを指定します。

デフォルトでは、データや要素を他の要素の中にドロップすることはできません。ドロップを許可するためには、その要素のデフォルトの処理を無効にする必要があります。これには、ondragover イベント内で event.preventDefault() メソッドを呼び出します。

event.preventDefault();

7. ドロップを実行する - ondrop

ドラッグされた要素がドロップターゲットに離されたとき、ondrop イベントが発生します。

function drop(ev) {
  // ブラウザのデフォルトの動作（リンクとして開くなど）を防止する
  ev.preventDefault();
  // dataTransfer.getData() メソッドを使用してドラッグされたデータを取得する
  var data = ev.dataTransfer.getData("text");
  // 取得した ID を持つ要素を、ドロップ先の要素の子要素として追加する
  ev.target.appendChild(document.getElementById(data));
}

7.1 ドロップ処理のステップ

preventDefault() を呼び出し、ブラウザのデフォルトの動作（ドロップ時にリンクとして開くなど）をキャンセルします。
dataTransfer.getData("text") を使用して、ドラッグ開始時に保存したデータ（要素の ID）を取得します。
取得した ID を持つ要素を、ドロップ先の要素に appendChild() して移動させます。

8. DataTransfer オブジェクトの詳細

Drag and Drop API の中心となるのは dataTransfer オブジェクトです。このオブジェクトは、ドラッグ操作中にデータを保持し、異なるイベント間で情報を受け渡す役割を担います。

setData(format, data): 指定した形式でデータを保存します。
getData(format): 保存されているデータを取得します。
clearData(): 全てのデータを消去します。

これらのメソッドを活用することで、単なる要素の移動だけでなく、リッチなインタラクション（画像、リンク、テキストデータの受け渡しなど）を Web アプリケーションに実装することが可能になります。