Move Shape to Another Container

To move a shape from one container into another with Konva, we can use the moveTo() method which requires a container as a parameter. A container can be another stage, a layer, or a group. You can also move groups into other groups and layers, or shapes from groups directly into other layers.

Instructions: Drag and drop the groups and observe that the red rectangle is bound to either the yellow group or the blue group. Use the buttons on the left to move the box from one group into another.

Vanilla

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

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

const layer = new Konva.Layer();

// yellow group

const group1 = new Konva.Group({
x: 50,
y: 50,
draggable: true,
});

const yellow = new Konva.Rect({
width: 100,
height: 100,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
});
group1.add(yellow);

// blue group

const group2 = new Konva.Group({
x: 200,
y: 50,
draggable: true,
});

const blue = new Konva.Rect({
width: 100,
height: 100,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
});
group2.add(blue);

// red box

const redBox = new Konva.Rect({
x: 10,
y: 10,
width: 30,
height: 30,
fill: 'red',
});
group1.add(redBox);

layer.add(group1);
layer.add(group2);
stage.add(layer);

// create buttons

const moveToGroup1Btn = document.createElement('button');
moveToGroup1Btn.textContent = 'Move to yellow group';
moveToGroup1Btn.addEventListener('click', () => {
redBox.moveTo(group1);
layer.draw();
});

const moveToGroup2Btn = document.createElement('button');
moveToGroup2Btn.textContent = 'Move to blue group';
moveToGroup2Btn.addEventListener('click', () => {
redBox.moveTo(group2);
layer.draw();
});

document.body.appendChild(moveToGroup1Btn);
document.body.appendChild(moveToGroup2Btn);

Open Sandbox

React

import { Stage, Layer, Rect, Group } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [redBoxGroup, setRedBoxGroup] = useState('yellow');

  return (
    <>
      <button onClick={() => setRedBoxGroup('yellow')}>
        Move to yellow group
      </button>
      <button onClick={() => setRedBoxGroup('blue')}>
        Move to blue group
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group x={50} y={50} draggable>
            <Rect
              width={100}
              height={100}
              fill="yellow"
              stroke="black"
              strokeWidth={4}
            />
            {redBoxGroup === 'yellow' && (
              <Rect x={10} y={10} width={30} height={30} fill="red" />
            )}
          </Group>
          <Group x={200} y={50} draggable>
            <Rect
              width={100}
              height={100}
              fill="blue"
              stroke="black"
              strokeWidth={4}
            />
            {redBoxGroup === 'blue' && (
              <Rect x={10} y={10} width={30} height={30} fill="red" />
            )}
          </Group>
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button @click="moveToYellow">Move to yellow group</button>
    <button @click="moveToBlue">Move to blue group</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-group :config="yellowGroupConfig">
          <v-rect :config="yellowBoxConfig" />
          <v-rect v-if="redBoxGroup === 'yellow'" :config="redBoxConfig" />
        </v-group>
        <v-group :config="blueGroupConfig">
          <v-rect :config="blueBoxConfig" />
          <v-rect v-if="redBoxGroup === 'blue'" :config="redBoxConfig" />
        </v-group>
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const redBoxGroup = ref('yellow');

const yellowGroupConfig = {
  x: 50,
  y: 50,
  draggable: true
};

const blueGroupConfig = {
  x: 200,
  y: 50,
  draggable: true
};

const yellowBoxConfig = {
  width: 100,
  height: 100,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4
};

const blueBoxConfig = {
  width: 100,
  height: 100,
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 4
};

const redBoxConfig = {
  x: 10,
  y: 10,
  width: 30,
  height: 30,
  fill: 'red'
};

const moveToYellow = () => {
  redBoxGroup.value = 'yellow';
};

const moveToBlue = () => {
  redBoxGroup.value = 'blue';
};
</script>

Open Sandbox