HTML5 Canvas Drop Events

Konva does not support drop events. But you can write your own drop events detections.
To detect drop target shape you have to move dragging object into another layer.

In this example you can see implementation of drop, dragenter, dragleave, dragover events.

Instructions: drag one shape over another. Or drag and drop one shape into another.

Konva Drop Events Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drop Events 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();

      stage.add(layer);

      var tempLayer = new Konva.Layer();
      stage.add(tempLayer);

      var text = new Konva.Text({
        fill: 'black',
      });
      layer.add(text);

      var star;
      for (var i = 0; i < 10; i++) {
        star = new Konva.Star({
          x: stage.width() * Math.random(),
          y: stage.height() * Math.random(),
          fill: 'blue',
          numPoints: 10,
          innerRadius: 20,
          outerRadius: 25,
          draggable: true,
          name: 'star ' + i,
          shadowOffsetX: 5,
          shadowOffsetY: 5,
        });
        layer.add(star);
      }

      stage.on('dragstart', function (e) {
        e.target.moveTo(tempLayer);
        layer.draw();
        text.text('Moving ' + e.target.name());
      });

      var previousShape;
      stage.on('dragmove', function (evt) {
        var pos = stage.getPointerPosition();
        var shape = layer.getIntersection(pos);
        if (previousShape && shape) {
          if (previousShape !== shape) {
            // leave from old targer
            previousShape.fire(
              'dragleave',
              {
                evt: evt.evt,
              },
              true
            );

            // enter new targer
            shape.fire(
              'dragenter',
              {
                evt: evt.evt,
              },
              true
            );
            previousShape = shape;
          } else {
            previousShape.fire(
              'dragover',
              {
                evt: evt.evt,
              },
              true
            );
          }
        } else if (!previousShape && shape) {
          previousShape = shape;
          shape.fire(
            'dragenter',
            {
              evt: evt.evt,
            },
            true
          );
        } else if (previousShape && !shape) {
          previousShape.fire(
            'dragleave',
            {
              evt: evt.evt,
            },
            true
          );
          previousShape = undefined;
        }
      });
      stage.on('dragend', function (e) {
        var pos = stage.getPointerPosition();
        var shape = layer.getIntersection(pos);
        if (shape) {
          previousShape.fire(
            'drop',
            {
              evt: e.evt,
            },
            true
          );
        }
        previousShape = undefined;
        e.target.moveTo(layer);
      });

      stage.on('dragenter', function (e) {
        e.target.fill('green');
        text.text('dragenter ' + e.target.name());
      });

      stage.on('dragleave', function (e) {
        e.target.fill('blue');
        text.text('dragleave ' + e.target.name());
      });

      stage.on('dragover', function (e) {
        text.text('dragover ' + e.target.name());
      });

      stage.on('drop', function (e) {
        e.target.fill('red');
        text.text('drop ' + e.target.name());
      });
    </script>
  </body>
</html>

Enjoying Konva? Please consider to support the project.