Drag and drop canvas shapes

Drag and drop in react-konva is a little bit tricky. So react-konva control all properties that you defined in render function. It means react-konva will force all this properties to the nodes.
So when you drag a shape you need to make sure you update its position in your state.

Here are three texts, We don’t control position position of the first text (x and y are not defined). So it is fully draggable.
The second text is draggable, but we don’t update its position in state. So react-konva will reset position on dragend.
The third text is defined correctly and its position is stored in the text. But we save its position only on dragend. In some apps it make sense to save position on every dragmove event.