title: How to make multiple elements drag and drop?
body: <p><strong>What I need is to make the 3 elements (mouth, left eye, right eye) draggable and droppable on the div with the background (face cut out). After the drop of each element, a text appears.</strong></p>
  <p>What I'm trying to achieve
  <a href="https://i.stack.imgur.com/cTN7v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cTN7v.png" alt="enter image description here" /></a></p>
  <p>The draggable pictures are the same size as the background.
  I have tried something but I haven't really got anywhere:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;style&gt;
           #div1 {
           width: 1554px;
           height: 874px;
           border: 1px solid #aaaaaa;
           z-index: 1;
           }
           #drag1 {
           width: 1554px;
           height: 874px;
           z-index: 2;
           }
           #drag2 {
           width: 1554px;
           height: 874px;
           z-index: 3;
           }
           #drag3 {
           width: 1554px;
           height: 874px;
           z-index: 4;
           }
        &lt;/style&gt;
        &lt;script&gt;
           function allowDrop(ev) {
             ev.preventDefault();
           }
           
           function drag(ev) {
             ev.dataTransfer.setData(&quot;text&quot;, ev.target.id);
           }
           
           function drop(ev) {
             ev.preventDefault();
             var data = ev.dataTransfer.getData(&quot;text&quot;);
             ev.target.appendChild(document.getElementById(data));
           }
           
        &lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div id=&quot;div1&quot; style=&quot;background-image: url('https://blondtrickster.com/wp-content/uploads/2021/12/BACKGROUND.png');&quot; ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;&lt;/div&gt;
        &lt;br&gt;
        &lt;img id=&quot;drag1&quot; src=&quot;https://blondtrickster.com/wp-content/uploads/2021/12/SUU.png&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot;&gt;
        &lt;img id=&quot;drag2&quot; src=&quot;https://blondtrickster.com/wp-content/uploads/2021/12/SILM_VASAK.png&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot;&gt;
        &lt;img id=&quot;drag3&quot; src=&quot;https://blondtrickster.com/wp-content/uploads/2021/12/SILM_PAREM.png&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot;&gt;
     &lt;/body&gt;
  &lt;/html&gt;      
  </code></pre>
  <p>Help would be much appreciated, since I'm a total beginner.</p>