JSFiddle - React, Tailwind, and code Playground

by Bryson Murray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/1.7.6/konva.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Konva Drag and Drop Multiple Shapes Demoview raw
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Konva Drag and Drop Multiple Shapes Demo</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

CSS

body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #F0F0F0;
    }

JavaScript

var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();

    var colors = ["red", "orange", "yellow", "green", "blue", "purple"];

    for(var i = 0; i < 6; i++) {
        var box = new Konva.Rect({
            x: i * 30 + 50,
            y: i * 18 + 40,
            fill: colors[i],
            stroke: "black",
            strokeWidth: 4,
            draggable: true,
            width: 100,
            height: 50
        });

        box.on("dragstart", function() {
            this.moveToTop();
            layer.draw();
        });

        box.on("dragmove", function() {
            document.body.style.cursor = "pointer";
        });
        /*
           * dblclick to remove box for desktop app
           * and dbltap to remove box for mobile app
           */
        box.on("dblclick dbltap", function() {
            this.destroy();
            layer.draw();
        });

        box.on("mouseover", function() {
            document.body.style.cursor = "pointer";
        });
        box.on("mouseout", function() {
            document.body.style.cursor = "default";
        });

        layer.add(box);
    }

    // add the layer to the stage
    stage.add(layer);