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');
    var droppedImage = e.originalEvent.dataTransfer.getData('text/html');
    var newURL = $(droppedImage).attr('src');
    var setWidth = prompt('Image width?');
    if (setWidth !== null) {
        $(this).attr('src', newURL);
        var setHeight = Math.floor((setWidth/this.naturalWidth)*this.naturalHeight);
        $(this).attr({'width': setWidth, 'height': setHeight});
    }
});