JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container"> 
    <div id="content" class="row">
         Tool Bar:
        <div class="objectDrag">
            <img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" width="25" height="25" />
        </div>
        <br>

	<div id="artCanvas" > </div>

    </div>
</div>

CSS

.objectDrag {

}
    
#artCanvas {
background-image: url("https://sivers.org/images/blank.jpg");
background-repeat: no-repeat;
width:500px; 
height:451px; 
color:white;
}

JavaScript

$(document).ready(function(){
    $(".objectDrag").draggable({
    	helper:'clone'
    });  
            
    $("#artCanvas").droppable({
        accept: ".objectDrag",
        drop: function(event,ui){
            var new_signature = $(ui.helper).clone().removeClass('objectDrag');
            new_signature.draggable();
            $(this).append(new_signature);
        }
    });

});