JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/js/jqueryui-editable.js"></script>
<link rel="stylesheet" href="http://vitalets.github.io/x-editable/assets/x-editable/jqueryui-editable/css/jqueryui-editable.css">
<div class="container">      
    <div id="toolbar">
       Tools:
       <div class="droppableShape strokeTool">
           <img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" />
       </div>
      
    </div>

    <div id="canvas_area">
        <div class="canvas ui-droppable" id="page1"><img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"></div>
    </div>
</div>

CSS

.canvas {

    border: 1px solid #DADADA;
    position: relative;
}

.droppableShape {
    z-index: 10;
}

#toolbar {
    float: left
}
#canvas_area {
    float: right;
}

JavaScript

$(document).ready(function(){
        $(".droppableShape").draggable({
            helper:'clone'
        });
        
        
        $(".canvas").droppable({
            accept: ".droppableShape",
            tolerance: 'fit',
            drop: function(event,ui){
                
                // Set variables
                var new_field = $(ui.helper).clone().removeClass('droppableShape');
                var droppable_page = $(this);
                var droppableOffset = $(this).offset();
                
                // Check the tool type
                switch(new_field.attr('class').split(" ")[0]) {
                    case "strokeTool":
                        new_field.css('top', ui.position.top - droppableOffset.top);
                        new_field.css('left', ui.position.left - droppableOffset.left);
                        break;
                    default:
                        console.log("A class type was not detected");
                }

                new_field.resizable({
                    maxHeight: 47,
                    maxWidth: 151,
                    minHeight: 18,
                    minWidth: 60,
                    aspectRatio: 151 / 47 
                 });
                new_field.on("resize", function(rEvent, rUI) {
                    new_field.find("img").css({
                        "width": rUI.size.width,
                        "height": rUI.size.height
                    });
                });

                // Set Draggable Options
                new_field.draggable({
                    containment: droppable_page,
                });

                // Add to drop area
                $(this).append(new_field);
            }
        });
 });