JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>

CSS

#container {
    border: 1px solid green;
}

JavaScript

console.clear();

var imageObj = new Image();
var img = null;

stage = new Kinetic.Stage({
        container: 'container',
        width: 600,
        height: 700
    });
layer = new Kinetic.Layer();
stage.add(layer);

var content = stage.getContent();
content.addEventListener("touchmove", function() {
    console.log("content touchmove");
}, false);
content.addEventListener("touchend", function() {
    console.log("content touchend");
}, false);

var rect = new Kinetic.Rect({
       x: 100,
       y: 400,
    width: 100,
    height: 50,
    fill: "red",
    draggable: true
    });
rect.draggable(true);
layer.add(rect);
layer.draw();

imageObj.onload = function() {
    img = new Kinetic.Image({
        x: 20,
        y: 20,
        image: this, 
        draggable: true
    });    
    
    img.on('dragstart', function(e) {
       alert("img dragstart"); 
    });
    
    
    layer.add(img);
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";