Search code examples
javascriptkonvajs

Drag shapes between two KonvaJS canvases

Is is possible in KonvaJS to drag a shape (like a rectangle) from one stage to another? Any tips?

Solution

  • You just need to listen to dragmove event and then move the shape to another stage when it goes outside of view.

    Like this:

    circle.on('dragmove', () => {
  if (circle.getStage() === stage1 && circle.y() > stage1.height()) {
    circle.y(0)
    circle.moveTo(layer2);
    layer1.draw();
    layer2.draw();
  }
  if (circle.getStage() === stage2 && circle.y() < 0) {
    circle.y(stage1.height());
    circle.moveTo(layer1);
    layer1.draw();
    layer2.draw();
  }
});

    The conditions may be different, depending on your use case.

    Demo: http://jsbin.com/kuculewibe/edit?css,js,output