HTML ドラッグアンドドロップ API
HTMLでは、任意の要素をドラッグアンドドロップできます。
例
TECH I.S.イメージを四角形の中にドラッグします。
ドラッグアンドドロップ
ドラッグアンドドロップは非常に一般的な機能です。オブジェクトを「掴んで」別の場所にドラッグするときです。
ブラウザのサポート
表内の番号は、ドラッグアンドドロップを完全にサポートする最初のブラウザのバージョンを示します。
|
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」で、値はドラッグ可能な要素(「drag1」)のID です。
どこにドロップするか - ondragover
ondragoverイベントは、ドラッグしたデータをドロップできる場所を指定します。
デフォルトでは、データ/要素を他の要素にドロップすることはできません。ドロップを許可するには、要素のデフォルトの処理を防止する必要があります。
これは、ondragoverイベントのevent.preventDefault()メソッドを呼び出すことで実行されます。
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」)です。
- ドラッグした要素をドロップ要素に追加します
他の例
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。