title: HTML5 Canvas Complex Drag and Drop Bounds

How to limit dragging ability with Konva?

To bound the movement of nodes being dragged and dropped inside regions with
Konva, we can use the dragmove event to define boundaries that the node cannot cross.

Tip: you can use shape.absolutePosition() method to get/set absolute position of a node, instead of relative x and y.

Instructions: Drag and drop the the light blue rectangle and observe that it
is bound below an imaginary boundary at y = 50. Drag and drop the yellow
rectangle and observe that it is bound inside of an imaginary circle.

Konva Complex Drag and Drop Bounds Demoview raw
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Complex Drag and Drop Bounds 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 blueGroup = new Konva.Group({
        x: 30,
        y: 70,
        draggable: true,
      });

      // bound below y=50
      blueGroup.on('dragmove', () => {
        blueGroup.y(Math.max(blueGroup.y(), 50));
      });

      // bound inside a circle
      var yellowGroup = new Konva.Group({
        x: stage.width() / 2,
        y: 70,
        draggable: true,
      });

      yellowGroup.on('dragmove', () => {
        var x = stage.width() / 2;
        var y = 70;
        var radius = 50;
        const pos = yellowGroup.absolutePosition();
        var scale =
          radius / Math.sqrt(Math.pow(pos.x - x, 2) + Math.pow(pos.y - y, 2));

        if (scale < 1) {
          yellowGroup.x(Math.round((pos.x - x) * scale + x));
          yellowGroup.y(Math.round((pos.y - y) * scale + y));
        }
      });

      var blueText = new Konva.Text({
        fontSize: 26,
        fontFamily: 'Calibri',
        text: 'bound below',
        fill: 'black',
        padding: 10,
      });

      var blueRect = new Konva.Rect({
        width: blueText.width(),
        height: blueText.height(),
        fill: '#aaf',
        stroke: 'black',
        strokeWidth: 4,
      });

      var yellowText = new Konva.Text({
        fontSize: 26,
        fontFamily: 'Calibri',
        text: 'bound in circle',
        fill: 'black',
        padding: 10,
      });

      var yellowRect = new Konva.Rect({
        width: yellowText.width(),
        height: yellowText.height(),
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4,
      });

      blueGroup.add(blueRect).add(blueText);
      yellowGroup.add(yellowRect).add(yellowText);

      layer.add(blueGroup);
      layer.add(yellowGroup);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>
Enjoying Konva? Please consider to support the project.