HTML5 のドラッグ アンド ドロップ

HTML5 地理位置情報 HTML5 ウェブストレージ

W3Cstudy 画像を四角形内にドラッグしてください。。

ドラッグ アンド ドロップ

ドラッグ アンド ドロップは非常に一般的な機能です。 何かを掴んで別の場所にドラッグするときです。

ドラッグ アンド ドロップは 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 属性はドラッグ(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() メソッドで同じ型に設定されたデータを返します。
  • ドラッグされたデータは、ドラッグされた要素 ("drag1") の ID です
  • ドラッグした要素をドロップした要素に追加する

その他の例

画像を前後にドラッグ アンド ドロップします

2 つの <div> 要素間で画像を前後にドラッグ アンド ドロップする方法:

W3Cstudy 画像を四角形内にドラッグしてください。

自分で試してみる

HTML5 地理位置情報 HTML5 ウェブストレージ