Errore: Impossibile eseguire "appendChild" su "Nodo": il parametro 1 non è di tipo "Nodo"

Sto cercando di trascinare e rilasciare un'immagine su un div. L'immagine non viene trascinata sul div e genera il seguente errore

Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop

Codice

  <!DOCTYPE HTML>
  <html>
     <head>
        <meta charset="utf-8">
        <title>Creativity Dashboard</title>

        <!-- Required CSS -->
        <link href="css/movingboxes.css" rel="stylesheet">
        <link href="css/compare.css" rel="stylesheet">

        <!--[if lt IE 9]>
           <link href="css/movingboxes-ie.css" rel="stylesheet" media="screen">
        <![endif]-->

        <!-- Required script -->
        <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <script src="js/jquery.movingboxes.js"></script>

        <!-- Demo only -->
        <link href="demo/demo.css" rel="stylesheet">
        <script src="demo/demo.js"></script>

        <script>
           function allowDrop(ev) {
              ev.preventDefault();
           }

           function drag(ev) {
              ev.dataTransfer.setData("text", ev.target.id);
           }

           function drop(ev) {
              ev.preventDefault();
              var data = ev.dataTransfer.getData("text");
              ev.target.appendChild(document.getElementById(data));
           }
        </script>
        <style>
           /* Overall & panel width defined using css in MovingBoxes version 2.2.2+ */
           #slider-one {
              width: 1003px;
           }

           #slider-one>li {
              width: 150px;
           }
        </style>
     </head>

     <body>
        <div class="wrapper">
           <!-- Slider #1 -->
           <ul id="slider-one">

              <li><img id="drag1" src="demo/1.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag2" src="demo/2.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag3" src="demo/3.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag5" src="demo/4.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag6" src="demo/5.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

              <li><img id="drag7" src="demo/6.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture" id="astronaut"></li>

              <li><img id="drag8" src="demo/7.jpg" draggable="true"
                 ondragstart="drag(event)" alt="picture"></li>

           </ul>
           <!-- end Slider #1 -->
           <div id="dragAnddrop" ondrop="drop(event)"
              ondragover="allowDrop(event)" style="width: 12em; height: 12em">
           </div>
        </div>

        <div>
           <div class="left">
              <img id="drag" draggable="true" ondragstart="drag(event)"
                 src="images/startingImage.jpg" style="width: 12em;" alt="picture">

           </div>
           <div class="middle ">
              <img id="image3" src="images/startingImage.jpg" class="image-size"
                 alt="picture" draggable="true" ondragstart="drag(event)"> <img
                 src="images/harvest.jpg" class="image-size" alt="picture">
           </div>
           <div class="right">
              <img src="images/startingImage.jpg" style="width: 12em;"
                 alt="picture">
           </div>
        </div>
     </body>
  </html>

In realtà è una risposta semplice.

La tua funzione sta restituendo una stringa anziché il divnodo. appendChildpuò solo aggiungere un nodo.

Ad esempio, se provi ad aggiungereChild la stringa:

var z = '<p>test satu dua tiga</p>'; // is a string 
document.body.appendChild(z);

Il codice sopra non funzionerà mai. Ciò che funzionerà è:

var z = document.createElement('p'); // is a node
z.innerHTML = 'test satu dua tiga';
document.body.appendChild(z);

Questo può accadere se non si sta trascinando accidentalmente l'elemento a cui è assegnato un ID (ad esempio si sta trascinando l'elemento circostante). In tal caso, l'ID è vuoto e la funzione drag () assegna un valore vuoto che viene quindi passato a drop () e non ha esito positivo.

Prova ad assegnare gli ID a tutti i tuoi elementi, inclusi i tds, i div o qualunque cosa sia intorno al tuo elemento trascinabile.

Nel mio caso, non c'era una stringa su cui stavo chiamando appendChild, l'oggetto che stavo trasmettendo l' appendChildargomento era sbagliato, era un array e avevo passato un oggetto element, quindi ho usato divel.appendChild(childel[0])invece di divel.appendChild(childel)e ha funzionato. Spero che aiuti qualcuno.

utilizzare ondragstart(event)invece diondrag(event)

Puoi anche usare element.insertAdjacentHTML('beforeend', data);

Leggere le "Considerazioni sulla sicurezza" su MDN .