今回は、A～Dまでのアルファベット画像をシアンからイエローへドラッグ＆ドロップで移動できるコンテンツをつくります。

デモページは、こちら

↓デモページのサンプルコードは以下となります。

▼HTML

     <div class="boxdrag" id="dropbox">
      <img src="img/a.png" id="a" alt="a" />
      <img src="img/b.png" id="b" alt="b" />
      <img src="img/c.png" id="c" alt="c" />
      <img src="img/d.png" id="d" alt="d" />
    </div>
    <div class="boxdrag" id="drop"></div>

▼CSS

<style>
div.boxdrag {
  width: 100%;
  height: 100px;
}
div#dropbox {
  background-color: #80ffff;
}
div#drop {
  background-color: #ffff80;
}
div.boxdrag img {
  width: 100px;
  height: 100px;
}
</style>

DataTransfer.getData()のメソットについて詳しく知りたいという方は下記ページもご覧ください。色分けされていてどこが記述されているのかわかりやすいです。DataTransfer.getData()

▼Javascript

<script>
let getElem = document.getElementsByTagName("img");
for (let i = 0; i < getElem.length; i++) {
  getElem[i].addEventListener(
    "dragstart",
    function (evt) {
      evt.dataTransfer.setData("text/plain", evt.target.id);
      evt.stopPropagation();
    },
    false
  );
}

let item1 = document.getElementById("drop");

item1.addEventListener(
  "drop",
  function (evt) {
    let data = evt.dataTransfer.getData("text/plain");

    let item2 = document.getElementById(data);
    if (item2) {
      item1.appendChild(item2);
    }

    evt.preventDefault();
  },
  false
);

item1.addEventListener(
  "dragenter",
  function (evt) {
    evt.preventDefault();
  },
  false
);

item1.addEventListener(
  "dragover",
  function (evt) {
    evt.preventDefault();
  },
  false
);
</script>

今回、参考にさせていただいたのは、 『複数のドラッグ要素を扱う-パズルネット 智慧（ソフィア）』さんです。 ありがとうございます。