JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="adder">Add Image</button>
<div id="div"></div>
<div id="body"></div>

CSS

img {
    width: 100px;
    height: 100px;
    background: red;
}
#div {
    width: 100%;
    height: 200px;
    border: 1px solid yellow;
}
#body {
    width: 100%;
    height: 200px;
    border: 1px solid blue;
    margin-top: 10px;
}

JavaScript

var btn = document.getElementById('adder');
var dropzone = document.getElementById('div');
var counter = 0;

dropzone.addEventListener('dragover', function(ev) {
  ev.preventDefault();
}, false);
dropzone.addEventListener('drop', function(ev) {
    ev.preventDefault();
    dropzone.appendChild(document.getElementById(ev.dataTransfer.getData('text')));
}, false);

btn.onclick = function(){ 
  function drag(ev) {
    ev.dataTransfer.setData("Text/plain", ev.target.id);
    console.log(ev.dataTransfer.getData('text'))
  }
  var image = document.createElement('img');
      image.src = "http://placehold.it/150x150";
      image.id  = "image-" + counter++;
      document.getElementById('body').appendChild(image);
      image.onload = function(event){
          this.addEventListener('dragstart', drag, false);
      };
   
};