fixed a bug when dropping card onto child element of itself

diff --git a/index.html b/index.html
index 10c24a605af3b800b0101351152d64935f90000f..56861235ef7aa3a12d2d5b73528319a2b082a76f 100644 (file)
--- a/index.html
+++ b/index.html
@@ -155,7 +155,9 @@ h2 {
 
     <script>
 'use strict';
-(() => {
+//(() => {
+    const childOf = (p,e) => e && (e === p || childOf(p, e.parentNode));
+
     const drag_start = (ev) => {
         ev.target.id = "selected-card";
         ev.dataTransfer.setData("text/plain", ev.target.id);
@@ -173,15 +175,15 @@ h2 {
         ev.preventDefault();
         const tgt = ev.target;
         const data = document.getElementById(ev.dataTransfer.getData("text"));
+        Array.from(document.getElementsByClassName("drag-target")).forEach((e) => e.classList.remove("drag-target"));
+        data.id = "";
         if (tgt.tagName === "H2") {
             tgt.parentNode.appendChild(data);
         } else if (tgt.classList.contains("card")) {
             tgt.parentNode.insertBefore(data, tgt);
-        } else {
+        } else if (!childOf(data, tgt)) {
             tgt.appendChild(data);
         }
-        data.id = "";
-        Array.from(document.getElementsByClassName("drag-target")).forEach((e) => e.classList.remove("drag-target"));
     }
 
     window.onclick = (ev) => {
@@ -216,7 +218,7 @@ h2 {
         cards[i].ondragstart = drag_start;
         cards[i].draggable = true;
     }
-})();
+//})();
     </script>
 </body>
 </html>