HTML5 ドラッグ＆ドロップ

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

ドラッグ＆ドロップ

ドラッグ＆ドロップ（Drag and 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"）です
  • ドラッグされた要素を配置された要素に追加します

さらに多くの例

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

どうやって 2つの <div> 要素の間で画像をドラッグ＆ドロップするか：

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

実際に試してみてください