HTMLドラッグアンドドロップAPI
HTMLでは、任意の要素をドラッグアンドドロップできます。
例
W3Schools画像を長方形にドラッグします。
ドラッグアンドドロップ
ドラッグアンドドロップは非常に一般的な機能です。これは、オブジェクトを「つかんで」別の場所にドラッグするときです。
ブラウザのサポート
表の数字は、ドラッグアンドドロップを完全にサポートする最初のブラウザバージョンを示しています。
| API | |||||
|---|---|---|---|---|---|
| Drag and Drop | 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」であり、値はドラッグ可能な要素（「drag1」）のIDです。
ドロップする場所-ondragover
イベントはondragover、ドラッグされたデータをドロップできる場所を指定します。
デフォルトでは、データ/要素を他の要素にドロップすることはできません。ドロップを許可するには、要素のデフォルトの処理を防ぐ必要があります。
これはevent.preventDefault()、ondragoverイベントのメソッドを呼び出すことによって行われます。
event.preventDefault()
ドロップを行う-オンドロップ
ドラッグされたデータがドロップされると、ドロップイベントが発生します。
上記の例では、ondrop属性は関数drop（event）を呼び出します。
function drop(ev)
{
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
コードの説明：
- ブラウザーのデフォルトでのデータ処理を防ぐには、preventDefault（）を呼び出します（デフォルトはドロップ時にリンクとして開かれます）
- dataTransfer.getData（）メソッドを使用してドラッグされたデータを取得します。このメソッドは、setData（）メソッドで同じタイプに設定されたすべてのデータを返します
- ドラッグされたデータは、ドラッグされた要素のIDです（ "drag1"）
- ドラッグした要素をドロップ要素に追加します
その他の例
例
2つの<div>要素間で画像をドラッグアンドドロップする方法：