ドラッグアンドドロップ

ドラッグアンドドロップ

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"の属性にします。


<img src="ufo.png" id ="ufo" draggable="true">

次にload()でイベントリスナーをセットします。

    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);

ドラッグの始まりは、ufoのクリックから始まるので、スタートはufoのイベントリスナーstartになります。
次にドラッグの移動(dragOver)とドロップ(drop)はdiv内での処理なのでdivにイベントリスナーをセットします。