title: Error: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'
body: <p>I am trying to drag and drop an image on a div. The image does not get get dragged onto the div and gives the following error</p>
  
  <pre><code>Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.draganddrop.html:20 dropdraganddrop.html:26 ondrop
  </code></pre>
  
  <p>Code
  </p>
  
  <pre><code>  &lt;!DOCTYPE HTML&gt;
    &lt;html&gt;
       &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Creativity Dashboard&lt;/title&gt;
  
          &lt;!-- Required CSS --&gt;
          &lt;link href="css/movingboxes.css" rel="stylesheet"&gt;
          &lt;link href="css/compare.css" rel="stylesheet"&gt;
  
          &lt;!--[if lt IE 9]&gt;
             &lt;link href="css/movingboxes-ie.css" rel="stylesheet" media="screen"&gt;
          &lt;![endif]--&gt;
  
          &lt;!-- Required script --&gt;
          &lt;script src="http://code.jquery.com/jquery-1.8.0.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.movingboxes.js"&gt;&lt;/script&gt;
  
          &lt;!-- Demo only --&gt;
          &lt;link href="demo/demo.css" rel="stylesheet"&gt;
          &lt;script src="demo/demo.js"&gt;&lt;/script&gt;
  
          &lt;script&gt;
             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));
             }
          &lt;/script&gt;
          &lt;style&gt;
             /* Overall &amp; panel width defined using css in MovingBoxes version 2.2.2+ */
             #slider-one {
                width: 1003px;
             }
  
             #slider-one&gt;li {
                width: 150px;
             }
          &lt;/style&gt;
       &lt;/head&gt;
  
       &lt;body&gt;
          &lt;div class="wrapper"&gt;
             &lt;!-- Slider #1 --&gt;
             &lt;ul id="slider-one"&gt;
  
                &lt;li&gt;&lt;img id="drag1" src="demo/1.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag2" src="demo/2.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag3" src="demo/3.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag5" src="demo/4.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag6" src="demo/5.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag7" src="demo/6.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture" id="astronaut"&gt;&lt;/li&gt;
  
                &lt;li&gt;&lt;img id="drag8" src="demo/7.jpg" draggable="true"
                   ondragstart="drag(event)" alt="picture"&gt;&lt;/li&gt;
  
             &lt;/ul&gt;
             &lt;!-- end Slider #1 --&gt;
             &lt;div id="dragAnddrop" ondrop="drop(event)"
                ondragover="allowDrop(event)" style="width: 12em; height: 12em"&gt;
             &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div&gt;
             &lt;div class="left"&gt;
                &lt;img id="drag" draggable="true" ondragstart="drag(event)"
                   src="images/startingImage.jpg" style="width: 12em;" alt="picture"&gt;
  
             &lt;/div&gt;
             &lt;div class="middle "&gt;
                &lt;img id="image3" src="images/startingImage.jpg" class="image-size"
                   alt="picture" draggable="true" ondragstart="drag(event)"&gt; &lt;img
                   src="images/harvest.jpg" class="image-size" alt="picture"&gt;
             &lt;/div&gt;
             &lt;div class="right"&gt;
                &lt;img src="images/startingImage.jpg" style="width: 12em;"
                   alt="picture"&gt;
             &lt;/div&gt;
          &lt;/div&gt;
       &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>