Why are you returning this error to me on the console?

Asked

Viewed 28 times

0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ::selection {
            background: transparent;
        }

        body {
            background: rgb(164, 53, 229);
        }

        #container {
            width: 620px;
            height: 500px;
            border: 2px solid #e2b72b;
            margin: 50px auto 0 auto;
            position: relative;
        }

        #drag, .drop {
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
            font-family: arial;
        }

        #drag {
            background: #ffffff;
            cursor: move;
            color: #000000;
            position: absolute;
            left: 0;
            top: 0;
        }

        .drop {
            background: #b3b3b385;
            color: #ffffff;
            position: relative;
            position: absolute;
        }

        .drop:nth-of-type(1) {
            left: 20px;
            top: 20px;
        }

        .drop:nth-of-type(2) {
            left: 140px;
            top: 20px;
        }

        .drop:nth-of-type(3) {
            left: 260px;
            top: 20px;
        }

        .drop:nth-of-type(4) {
            left: 380px;
            top: 20px;
        }

        .drop:nth-of-type(5) {
            left: 500px;
            top: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="drop">
            <div id="drag" draggable="true">Drag</div>
            Drop
        </div>
        <div class="drop">Drop</div>
        <div class="drop">Drop</div>
        <div class="drop">Drop</div>
        <div class="drop">Drop</div>
    </div>

    <script>
        let drag = document.querySelector("#drag");
        let drop = document.querySelectorAll(".drop");

        drag.ondragstart = (event) => {
            event.dataTransfer.setData("text/plain", event.target.id);
        }

        for (i = 0; i < drop.length; i ++) {
            drop[i].ondragover = (event) => {
                event.preventDefault();
            
                event.target.style.border = "3px dashed #33e0c9";
            }

            drop[i].ondragleave = (event) => {
                event.target.style.border = "none";
            }

            drop[i].ondrop = (event) => {
                let data = event.dataTransfer.getData("text");
                event.target.appendChild(document.querySelector(`#${data}`));
                event.target.style.border = "none";
            }
        }
    </script>
</body>
</html>

My application of Dran And Drop works normal but when I try to drag the draggable element (Drag) into the element that contains itself (Drop) an error is returned in console:

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the 
parent.at HTMLDivElement.drop.<computed>.ondrop

The whole mistake is:

test2.html:113 Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child element contains the parent.
at HTMLDivElement.drop.<computed>.ondrop (file:///C:/Users/leandro/Desktop/test/test2.html:113:30)

Why are you returning this mistake to me?

javascript

1 answer

0


You are trying to insert a knot inside yourself. You solve this by checking with a if if the dragged element is different from the element where it will be dropped:

if(event.target != document.querySelector(`#${data}`)){
  // se for diferente, vc faz o appendChild
}

Behold:

let drag = document.querySelector("#drag");
let drop = document.querySelectorAll(".drop");

drag.ondragstart = (event) => {
   event.dataTransfer.setData("text/plain", event.target.id);
}

for (i = 0; i < drop.length; i ++) {
   drop[i].ondragover = (event) => {
       event.preventDefault();
   
       event.target.style.border = "3px dashed #33e0c9";
   }

   drop[i].ondragleave = (event) => {
       event.target.style.border = "none";
   }

   drop[i].ondrop = (event) => {
       let data = event.dataTransfer.getData("text");
       if(event.target != document.querySelector(`#${data}`)){
          event.target.appendChild(document.querySelector(`#${data}`));
          event.target.style.border = "none";
       }
   }
}
* {
   margin: 0;
   padding: 0;
}

::selection {
   background: transparent;
}

body {
   background: rgb(164, 53, 229);
}

#container {
   width: 620px;
   height: 500px;
   border: 2px solid #e2b72b;
   margin: 50px auto 0 auto;
   position: relative;
}

#drag, .drop {
   width: 100px;
   height: 100px;
   text-align: center;
   line-height: 100px;
   font-size: 20px;
   font-family: arial;
}

#drag {
   background: #ffffff;
   cursor: move;
   color: #000000;
   position: absolute;
   left: 0;
   top: 0;
}

.drop {
   background: #b3b3b385;
   color: #ffffff;
   position: relative;
   position: absolute;
}

.drop:nth-of-type(1) {
   left: 20px;
   top: 20px;
}

.drop:nth-of-type(2) {
   left: 140px;
   top: 20px;
}

.drop:nth-of-type(3) {
   left: 260px;
   top: 20px;
}

.drop:nth-of-type(4) {
   left: 380px;
   top: 20px;
}

.drop:nth-of-type(5) {
   left: 500px;
   top: 20px;
}
<div id="container">
  <div class="drop">
      <div id="drag" draggable="true">Drag</div>
      Drop
  </div>
  <div class="drop">Drop</div>
  <div class="drop">Drop</div>
  <div class="drop">Drop</div>
  <div class="drop">Drop</div>
</div>

  • Perfect! That’s right, vlw! :)

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.