JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="addItem()">Add Image</button>
<span>&lt;--Add an image</span>

CSS

.addedImage {
    display: block;
    border: 3px solid #555;
}

.dragOver {
    border: 3px dashed #555;
}

JavaScript

var imageCount = 0;
function addItem () {
    imageCount++;
    $('body').append('<img class="addedImage" src="http://placehold.it/300x150"></img>');
    $('span').html('Now drag the Google logo to the box below it<br /><img src="https://www.google.com/images/srpr/logo11w.png" style="width: 100px; height: auto;" />');
}

$('body').on('dragover', '.addedImage', function(e) {
    e.preventDefault();
    $(this).addClass('dragOver');
});

$('body').on('dragleave', '.addedImage', function(e) {
    e.preventDefault();
    $(this).removeClass('dragOver');
});

$('body').on('drop', '.addedImage', function(e) {
    e.preventDefault();
    $(this).removeClass('dragOver');
    if(e.originalEvent.dataTransfer.files.length > 0) {
        alert('Got the drop!');
    } else {
        alert('Nothing happened!');
    };
});