HTML5 Canvas Drag and Drop a Group Tutorial

To drag and drop groups with Konva, we can set the draggable property
of the config object to true when the group is instantiated, or we can use the draggable() method.

Konva Drag and Drop the Group Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drag and Drop a Group Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

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

      var shapesLayer = new Konva.Layer();
      var group = new Konva.Group({
        draggable: true,
      });
      var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];

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

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

      shapesLayer.add(group);
      stage.add(shapesLayer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.