JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<h4>Drag the 3 objects from blue toolbar to the canvas<br>Then you can drag around canvas.</h4>
<div id="toolbar">
<img id="house0" width=32 height=32 src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ">
<img id="house1" width=32 height=32 src="http://sandbox.kendsnyder.com/IM/square-stripped.png">
<img id="house2" width=32 height=32 src="http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA">
<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 house icon in the toolbar
// hide the icon until its image has loaded

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

//initialize counter for image IDs
var imageCount = -1;

var imageSrc = [
    "http://t2.gstatic.com/images?q=tbn:ANd9GcQ5fOr5ro_dK6D9UmSsVn0Z9m1QQMqRwr0z1tP_BzEGr7GuTrgeZQ",
    "http://sandbox.kendsnyder.com/IM/square-stripped.png",
    "http://t3.gstatic.com/images?q=tbn:ANd9GcRBYkAv40Eeaxlze2dqhayvKUeoUH6l_jYNLlsfjzJu0Uy9ucjcNA"
];

//loop through imageSrc list
for (var i = 0; i  < imageSrc.length; i++) {
    //use a closure to keep references clean
    (function() {
        var $house, image;
        var $house = $("#house"+i);
        $house.hide();
        image = new Image();
        image.onload = function () {
            $house.show();
        }
        image.src = imageSrc[i];
        // start loading the image used in the draggable toolbar element
        // this image will be used in a new Kinetic.Image
        // make the toolbar image draggable
        $house.draggable({helper: 'clone'});
        $house.data("url", "house.png"); // key-value pair
        $house.data("width", "32"); // key-value pair
        $house.data("height", "33"); // key-value pair
        $house.data("image", image); // key-value pair
    })();
}
// 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,
});

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

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

    // get the drop payload (here the payload is the image)
    var...