要素をドラッグ＆ドロップできるようにする - JavaScript

HTMLの要素をドラッグ＆ドロップできるようにするJavaScriptのコードを紹介します。

概要

HTML5のドラッグ＆ドロップ機能を利用すると、HTMLページの要素をドラッグ＆ドロップできるようになります。

プログラム1 : シンプルなドラッグ＆ドロップ例

コード

下記のコードを記述します。

SimpleDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleDragDrop.css" />
  <script>
    function load() {
      var box = document.querySelector('.box');
      box.addEventListener('dragstart', onDragStart, false);

      var zone = document.querySelector('.dropzone');
      zone.addEventListener('dragover', onDragOver, false);
      zone.addEventListener('drop', onDrop, false);
   }

    function onDragStart(e) {
      e.dataTransfer.setData('text', this.id);
    }

    function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }

    function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }

  </script>
</head>
<body onload="load();">
  <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>
</body>
</html>

SimpleDragDrop.css

.box {
  width:32px;
  height:32px;
  border:solid 1px #002f9f;
}

.dropzone {
  margin-top:16px;
  margin-bottom:16px;
  width: 280px;
  height: 64px;
  border: solid 1px #808080;
}

解説

  <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>

ページには上記のDIV枠を2つ表示します。class="box"のほうがドラッグできるオブジェクト、id="dropzone"のほうがドロップ受け入れ領域のdiv枠になります。ドラッグできるオブジェクトには、draggable="true" を指定してドラッグ可能オブジェクトに設定します。

    function load() {
      var box = document.querySelector('.box');
      box.addEventListener('dragstart', onDragStart, false);

      var zone = document.querySelector('.dropzone');
      zone.addEventListener('dragover', onDragOver, false);
      zone.addEventListener('drop', onDrop, false);
   }

    function onDragStart(e) {
      e.dataTransfer.setData('text', this.id);
    }

    function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }

    function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }

上記のコードにより、各要素にドラッグ＆ドロップのイベントを割り当てています。
ドラッグされる要素には、"dragstart" イベントを設定しています。ドラッグが開始されると onDragStart 関数が実行されます。
ドロップ対象の要素には、"dragover" "drop"イベントを設定しています。ドラッグされた要素がドロップエリアに入ると、onDragOver関数が実行され、要素がドロップされると onDrop関数が実行されます。
dragstartのイベントでは、dataTransferオブジェクトに値を設定するコードを記述しています。今回はdataTransferに挿入した値は利用していませんが、このコードがないとドロップが開始されないブラウザがあるため、データの利用が無い場合でも記述します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。

上部の正方形の枠をドラッグします。下の枠にドラッグすると、枠内に"onDragOver"の文字が表示されます。

枠の中でドロップすると、枠内に"onDrop"の文字が表示されます。

プログラム2 : イベントを追加したドラッグ＆ドロップ例

コード

下記のコードを記述します。

SimpleDragDrop2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="SimpleDragDrop2.css" />
  <script>
    function load() {
      var box = document.querySelector('.box');
      box.addEventListener('dragstart', onDragStart, false);
      box.addEventListener('dragend', onDragEnd, false);

      var box = document.querySelector('.dropzone');
      box.addEventListener('dragenter', onDragEnter, false);
      box.addEventListener('dragover', onDragOver, false);
      box.addEventListener('dragleave', onDragLeave, false);
      box.addEventListener('drop', onDrop, false);
    }

    function onDragStart(e) {
      e.dataTransfer.setData('Text', this.id);
      this.textContent = 'onDragStart';
    }

    function onDragEnd(e) {
      this.textContent = 'onDragEnd';
    }

    function onDragEnter(e) {
      this.textContent = 'onDragEnter';
    }
    
    function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }

    function onDragLeave(e) {
      this.textContent = 'onDragLeave';
    }

    function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }
  </script>
</head>
<body onload="load();">
  <div id="box" class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>

</body>
</html>

SimpleDragDrop.css

.box {
  width:32px;
  height:32px;
  border:solid 1px #d01313;
}

.dropzone {
  margin-top:16px;
  margin-bottom:16px;
  width: 280px;
  height: 64px;
  border: solid 1px #808080;
}

解説

  <div class="box" draggable="true"></div>
  <div id="dropzone" class="dropzone"></div>

ページには先の例と同様にDIV枠を2つ表示します。ドラッグできるオブジェクトには、draggable="true" を指定してドラッグ可能オブジェクトに設定します。

    function load() {
      var box = document.querySelector('.box');
      box.addEventListener('dragstart', onDragStart, false);
      box.addEventListener('dragend', onDragEnd, false);

      var box = document.querySelector('.dropzone');
      box.addEventListener('dragenter', onDragEnter, false);
      box.addEventListener('dragover', onDragOver, false);
      box.addEventListener('dragleave', onDragLeave, false);
      box.addEventListener('drop', onDrop, false);
    }

    function onDragStart(e) {
      e.dataTransfer.setData('Text', this.id);
      this.textContent = 'onDragStart';
    }

    function onDragEnd(e) {
      this.textContent = 'onDragEnd';
    }

    function onDragEnter(e) {
      this.textContent = 'onDragEnter';
    }
    
    function onDragOver(e) {
      e.preventDefault();
      this.textContent = 'onDragOver';
    }

    function onDragLeave(e) {
      this.textContent = 'onDragLeave';
    }

    function onDrop(e) {
      e.preventDefault();
      this.textContent = 'onDrop';
    }

上記のコードにより、各要素にドラッグ＆ドロップのイベントを割り当てています。
ドラッグされる側の要素には、"dragstart", "dragend" イベントを割り当てています。ドラッグを開始すると、onDragStart関数、ドラッグが終了すると、onDragEnd関数が呼び出されます。
ドロップされる側の要素には、"dragenter", "dragover", "dragleave", "drop"イベントを割り当てています。ドラッグされた要素がドロップ領域に入ると、onDragEnter関数が実行され、ドロップ領域内をドラッグされている状態ではonDragOver関数が実行され、ドラッグされた要素がドロップ領域から出ると onDragLeave関数が実行されます。ドラッグされた要素がドロップされると、onDrop関数が実行されます。