HTML5 ドラッグ＆ドロップ

CodeW3C.com の画像を矩形にドラッグしてください。

ドラッグ＆ドロップ

ドラッグ＆ドロップ（Drag 和 Drop）は非常に一般的な機能です。これは、何かを取って別の場所にドラッグするという意味です。

ドラッグ＆ドロップは、HTML5 セキュリティの一部です：どの要素もドラッグ可能です。

ブラウザのサポート

テーブルの数字は、ドラッグ＆ドロップを完全にサポートする最初のブラウザのバージョンを示しています。

API
ドラッグ＆ドロップ 4.0 9.0 3.5 6.0 12.0

HTML ドラッグ＆ドロップ実例

以下は、ドラッグ＆ドロップの簡単な例です：

実例

<!DOCTYPE HTML>
<html>
<head>
<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>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>
</html>

自分で試してみる

少し複雑に見えるかもしれませんが、ドラッグ＆ドロップイベントのすべての異なる部分を研究しましょう。

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

まず：要素をドラッグ可能にするには、draggable 属性を true に設定してください：

<img draggable="true">

ドラッグ＆ドロップの内容 - ondragstart と setData()

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

上記の例では、ondragstart 属性が drag(event) 関数を呼び出し、どのデータをドラッグするかを指定しています。

dataTransfer.setData() メソッドは、ドラッグされたデータのデータタイプと値を設定します：

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

この例では、データタイプは "text" で、値はこのドラッグ可能な要素の id （"drag1"）です。

どこにドラッグするか - ondragover

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

デフォルトでは、データ／要素は他の要素に配置できません。ドラッグ＆ドロップを実現するために、このデフォルトの処理方法を阻止する必要があります。

このタスクは ondragover イベントの event.preventDefault() メソッドによって実行されます：

event.preventDefault();

置く - ondrop

ドラッグされたデータを解放したときに drop イベントが発生します。

上記の例では、ondrop 属性が drop(event) という関数を呼び出しています：

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

コードの説明：

  • preventDefault() を呼び出して、データのブラウザのデフォルト処理方法を阻止します（drop イベントのデフォルト動作はリンク形式で開くことです）
  • dataTransfer.getData() メソッドを使用してドラッグされたデータを取得します。このメソッドは、setData() メソッドで同じタイプに設定されたデータを返します
  • ドラッグされたデータは、ドラッグされた要素の id （"drag1"）です
  • ドラッグされた要素を配置された要素に追加します

さらに多くの例

画像をドラッグ＆ドロップ

二つの <div> 要素の間で画像をドラッグ＆ドロップする方法：

CodeW3C.com の画像を矩形にドラッグしてください。

自分で試してみる