JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h5>Drag the icon from the toolbar to the Kinetic.Stage<br>This creates new Kinetic.Images</br>The images on the stage are draggable.</h5>/
<div id="toolbar">
    <img id="house" width=32 height=32 src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png" />
    <img id="cloud" width=32 height=32 src="http://www.wpclipart.com/small_icons/misc_2/cloud.png" />
    <img id="evergreen" width=32 height=32 src="http://www.wpclipart.com/small_icons/misc_2/evergreen.png" />
    <img id="squirrel" width=32 height=32 src="http://www.wpclipart.com/small_icons/animals/squirrel.png" <br>
</div>
<div id="container"></div>

CSS

body {
    padding:20px;
}
#container {
    border:solid 1px #ccc;
    margin-top: 10px;
    width:350px;
    height:350px;
}
#toolbar {
    width:350px;
    height:35px;
    border:solid 1px blue;
}

JavaScript

// get a reference to the icons in the toolbar
// Jal:NO! hide the icon until its image has loaded
// Fetch each icon from toolbar, and make it draggable and droppable
// in the container division. An arbitrary number of 
// images are thus supported.
var imageA = []; // An array of objects in the toolbar. 
$("#toolbar")
    .contents()
    .filter(function () {
    var o;

    if (this.tagName && this.tagName.toUpperCase() === "IMG") {
        imageA.push(o = {
            jso: $(this),
            th: this
        });
//        alert(this.tagName.toUpperCase());
//        o.jso.hide();
        o.image = new Image();
        o.image.src = o.jso.attr("src");
//        o.image.onload = function () {
//            o.jso.show();
//        };
        o.jso.draggable({
            helper: 'clone'
        });
        o.jso.data("url", o.jso.attr("src")); // key-value pair
        o.jso.data("width", o.jso.attr("width")); // key-value pair
        o.jso.data("height", o.jso.attr("height")); // key-value pair
        o.jso.data("image", o.image); // key-value pair
    }
});

// get the offset position of the kinetic container
var $stageContainer = $("#container");
var stageOffset = $stageContainer.offset();
var offsetX = stageOffset.left;
var offsetY = stageOffset.top;

// create the Kinetic.Stage and layer
var stage = new Kinetic.Stage({
    container: 'container',
    width: 350,
    height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);

// make the Kinetic Container a dropzone
$stageContainer.droppable({
    drop: dragDrop
});

// hangle a drop into the Kinetic container
function dragDrop(e, ui) {

    // get the drop point
    var x = ui.offset.left - offsetX;
    var y = ui.offset.top - offsetY;

    // get the drop payload (here the payload is the image)
    var element = ui.draggable;
    var data = element.data("url");
    var theImage = element.data("image");

    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any...