ufoをドラッグして上の四角の範囲でドロップすることができます。 ソースです。 <!DOCTYPE html> <html> <head> <meta charset='UTF-8' /> <title>Drag and Drop</title> <script> function load() { //ufo要素にイベントハンドラを登録 var elm = document.getElementById('ufo'); elm.addEventListener('dragstart', dragStart, false); // ドロップ対象のdiv要素にイベントハンドラを登録 var target = document.getElementById('div'); target.addEventListener('drop', drop, false); target.addEventListener('dragover', dragOver, false); } // ドラッグ開始 function dragStart(event){ // ドラッグ対象の要素のidを保存 event.dataTransfer.setData('image/png', event.target.id); } function dragOver(event){ // デフォルトの動作をキャンセルする event.preventDefault(); } // ドロップされた function drop(event){ // ドロップされた要素のidを取得 var id = event.dataTransfer.getData('image/png'); // ドロップされた要素をドロップ対象のdiv要素の配下に追加する event.currentTarget.appendChild(document.getElementById(id)); // デフォルトの動作をキャンセルする event.preventDefault(); } document.addEventListener("DOMContentLoaded", load, false); </script> </head> <body> <!-- ドロップされるdiv要素 --> <div id="div" style="height: 150px; border: 1px solid black;"></div> <!-- ドラッグ可能なimg要素にセット --> <img src="ufo.png" id ="ufo" draggable="true"> </body> </html>imgタグにdraggable="true"の属性にします。
次にload()でイベントリスナーをセットします。
ドラッグの始まりは、ufoのクリックから始まるので、スタートはufoのイベントリスナーstartになります。
次にドラッグの移動(dragOver)とドロップ(drop)はdiv内での処理なのでdivにイベントリスナーをセットします。 |