HTML5 Canvas Simple Drag Bounds Tutorial

To restrict the movement of shapes being dragged and dropped with Konva, we can use the dragmove event and overrides the drag and drop position inside of it.

This event can be used to constrain the drag and drop movement in all kinds of ways, such as constraining the motion horizontally, vertically, diagonally, or radially, or even constrain the node to stay inside of a box, circle, or any other path.

shape.on('dragmove', () => {
  // lock position of the shape on x axis
  // keep y position as is
  shape.x(0);
});

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 horizontal text and observe that it can only move horizontally. Drag and drop the vertical text and observe that it can only move vertically.

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight,
});

const layer = new Konva.Layer();
stage.add(layer);

const horizontalText = new Konva.Text({
  x: 50,
  y: 50,
  text: 'Drag me horizontally',
  fontSize: 16,
  draggable: true,
  fill: 'black',
});

horizontalText.on('dragmove', function () {
  // horizontal only
  this.y(50);
});

const verticalText = new Konva.Text({
  x: 200,
  y: 50,
  text: 'Drag me vertically',
  fontSize: 16,
  draggable: true,
  fill: 'black',
});

verticalText.on('dragmove', function () {
  // vertical only
  this.x(200);
});

layer.add(horizontalText);
layer.add(verticalText);

Open Sandbox

React

import { Stage, Layer, Text } from 'react-konva';

const App = () => {
  const handleHorizontalDragMove = (e) => {
    e.target.y(50);
  };

  const handleVerticalDragMove = (e) => {
    e.target.x(200);
  };

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          x={50}
          y={50}
          text="Drag me horizontally"
          fontSize={16}
          draggable
          fill="black"
          onDragMove={handleHorizontalDragMove}
        />
        <Text
          x={200}
          y={50}
          text="Drag me vertically"
          fontSize={16}
          draggable
          fill="black"
          onDragMove={handleVerticalDragMove}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-text
        :config="horizontalTextConfig"
        @dragmove="handleHorizontalDragMove"
      />
      <v-text
        :config="verticalTextConfig"
        @dragmove="handleVerticalDragMove"
      />
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const horizontalTextConfig = {
  x: 50,
  y: 50,
  text: 'Drag me horizontally',
  fontSize: 16,
  draggable: true,
  fill: 'black'
};

const verticalTextConfig = {
  x: 200,
  y: 50,
  text: 'Drag me vertically',
  fontSize: 16,
  draggable: true,
  fill: 'black'
};

const handleHorizontalDragMove = (e) => {
  e.target.y(50);
};

const handleVerticalDragMove = (e) => {
  e.target.x(200);
};
</script>

Open Sandbox