HTML5 Canvas Drag and Drop Tutorial

To drag and drop shapes with Konva, we can set the draggable property
to true when we instantiate a shape, or we can use the draggable() method.
The draggable() method enables drag and drop for both desktop and mobile
applications automatically.

To detect drag and drop events with Konva, we can use the on() method to
bind dragstart, dragmove, or dragend events to a node.
The on() method requires an event type and a function to be executed when the event occurs.

Konva Drag and Drop 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 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 layer = new Konva.Layer();
      var rectX = stage.width() / 2 - 50;
      var rectY = stage.height() / 2 - 25;

      var box = new Konva.Rect({
        x: rectX,
        y: rectY,
        width: 100,
        height: 50,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4,
        draggable: true,
      });

      // add cursor styling
      box.on('mouseover', function () {
        document.body.style.cursor = 'pointer';
      });
      box.on('mouseout', function () {
        document.body.style.cursor = 'default';
      });

      layer.add(box);
      stage.add(layer);
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.