web-dev-qa-db-fra.com

Erreur: Impossible d'exécuter 'appendChild' sur 'Node': le paramètre 1 n'est pas de type 'Node'

J'essaie de faire glisser une image sur un div. L'image ne se fait pas glisser sur la div et donne l'erreur suivante

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

Code

  <!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>
javascripthtml5
102
MindBrain

C'est en fait une réponse simple.

Votre fonction renvoie une chaîne plutôt que le nœud div. appendChild ne peut ajouter qu'un nœud.

Par exemple, si vous essayez d’ajouterChild la chaîne:

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

Le code ci-dessus ne fonctionnera jamais. Ce qui fonctionnera est:

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

Cela peut se produire si vous ne faites pas glisser accidentellement l'élément auquel un identifiant est attribué (par exemple, vous faites glisser l'élément environnant). Dans ce cas, l'ID est vide et la fonction drag () assigne une valeur vide qui est ensuite transmise à drop () et y échoue.

Essayez d’attribuer les identifiants à tous vos éléments, y compris les tds, les divs ou tout ce qui se trouve autour de votre élément déplaçable.

9
kubante

Dans mon cas, il n'y avait pas de chaîne sur laquelle j'appelais appendChild, l'objet que je transmettais sur appendChild l'argument était incorrect, il s'agissait d'un tableau et j'avais passé un élément element, donc j'ai utilisé divel.appendChild(childel[0]) au lieu de divel.appendChild(childel) et cela a fonctionné. J'espère que ça aidera quelqu'un.

4
Santosh Kumar