title: HTML Drag/Drop API - Disappear after Drag
body: <p>I'm using the HTML Drag/Drop API W3schools is suggesting (<a href="https://www.w3schools.com/html/html5_draganddrop.asp" rel="nofollow noreferrer">w3schools html drag/drop api</a>)</p>
  <p>I'm trying to make something like moving objects from 1 bag to another.</p>
  <p>All is working fine so far except when I somehow misclick and drag 1 picture onto the other(instead into free space in the div).</p>
  <p>Then the dropped picture is disappearing. When I check the html code, I can see that the dropped img went under the first img.</p>
  <p>Probably because of the &quot;child&quot; element in the js code i guess. That is where I need help.</p>
  <p>How do I prevent that so I can only drop the images into the divs but not into other images?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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));
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#div1, #div2 {
    float: left;
    width: 100px;
    height: 350px;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;Drag and Drop&lt;/h2&gt;
  &lt;p&gt;Drag the image back and forth between the two div elements.&lt;/p&gt;
  
  &lt;div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Bag1
    &lt;img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"&gt;
  &lt;/div&gt;
  
  &lt;div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"&gt;Bag2
      &lt;img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>