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

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

概要

HTML5のドラッグ＆ドロップ機能を利用すると、HTMLページの要素をドラッグ＆ドロップできるようになります。こちらの記事では単体の要素をドラッグ＆ドロップできるコードを紹介しました。この記事では複数の要素をドラッグ＆ドロップできるようにするコードを紹介します。

プログラム : ULタグを利用した複数の項目をドラッグ＆ドロップする例

コード

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

ListDragDrop.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ListDragDrop.css"/>

  <script>
    function load() {
      var delbox = document.getElementById('del');
      delbox.addEventListener('dragover', onDragOver, false);
      delbox.addEventListener('drop', onDrop, false);


      var elems = document.querySelectorAll('ul#list1 > li');
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute('draggable', 'true');
        el.addEventListener('dragstart', onDragStart, false);
      }
    }

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

    function onDragOver(e) {
      e.preventDefault();
    }

    function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();
      var eid = e.dataTransfer.getData('text');
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

  </script>
</head>
<body onload="load();">
    <div id="del">削除</div>
    <ul id="list1">
      <li id="1">ぺんぎん</li>
      <li id="2">イルカ</li>
      <li id="3">らくだ</li>
      <li id="4">くじら</li>
      <li id="5">しろくま</li>
    </ul>
</body>
</html>

ListDragDrop.css

#del{
  width:120px;
  height:60px;
  border: solid 2px #ff6a00;
}

ul#list1 > li {
  display: block;
  width: 150px;
  border: 1px solid #808080;
}

解説

    function load() {
      var delbox = document.getElementById('del');
      delbox.addEventListener('dragover', onDragOver, false);
      delbox.addEventListener('drop', onDrop, false);


      var elems = document.querySelectorAll('ul#list1 > li');
      for (var i = 0; i < elems.length; i++) {
        el = elems[i];
        el.setAttribute('draggable', 'true');
        el.addEventListener('dragstart', onDragStart, false);
      }
    }

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

    function onDragOver(e) {
      e.preventDefault();
    }

    function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();
      var eid = e.dataTransfer.getData('text');
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }

ページロード時にload関数が実行されます。load関数中の下記のコードにより、[削除]のdiv枠にdragoverとdropイベントを割り当てます。[削除]ボックスに要素がドラッグされるとonDragOver関数が呼び出され、ドロップされるとonDrop関数が呼び出されます。

  var delbox = document.getElementById('del');
  delbox.addEventListener('dragover', onDragOver, false);
  delbox.addEventListener('drop', onDrop, false);

querySelectorAllメソッドを呼び出し、ulタグ内のli要素を取得します。取得した要素の配列をforループで繰り返し処理し、それぞれの要素の"draggable"属性をtrueに設定します。この処理により、ドラッグ可能なオブジェクトとして設定されます。また、dragstart イベントを割り当てます。

  var elems = document.querySelectorAll('ul#list1 > li');
  for (var i = 0; i < elems.length; i++) {
    el = elems[i];
    el.setAttribute('draggable', 'true');
    el.addEventListener('dragstart', onDragStart, false);
  }

リストの項目がドラッグされると下記のonDragStart関数が呼び出されます。dataTransfer オブエジェクトのsetDataメソッドを呼び出して、要素のIDをdataTransfer オブエジェクトに格納します。

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

リストの項目がドロップ領域内をドラッグされると、下記のonDragOver関数が呼び出されます。DragOverでは特に処理をしないため、PreventDefaultメソッドを呼び出し、イベントをキャンセルします。

    function onDragOver(e) {
      e.preventDefault();
    }

リストの項目がドロップ領域内でドロップされると、onDrop関数が呼び出されます。stopPropagationメソッドを呼び出し、イベントの処理をキャンセルします。続いて、dataTransferオブジェクトから、IDを取り出します。IDを取得することでどの要素がドロップ領域にドロップされたのかを取得できます。getElementByIdメソッドを呼び出し、IDからLIタグのオブジェクトを取得します。
取得したLIオブジェクトのpaerntNode プロパティで親ノードにアクセスし、removeChild メソッドを呼び出し、ドロップされたリストの項目を削除します。

    function onDrop(e) {
      if (e.stopPropagation) e.stopPropagation();
      var eid = e.dataTransfer.getData('text');
      var elem = document.getElementById(eid);
      elem.parentNode.removeChild(elem);
    }