Create a Rect component

It does nothing special. Just a dummy wrapper of <rect>

Add d3-drag

We use ReactDOM to find out the dom node. And use d3-drag to respond to mouse enter and mouse move. Although svg does not have drag drop event, d3-drag simulated it by intercepting window wide mouse events.

Setting x y attribute works. However, dragging will cause the rect "jump" to the position of mouse cursor. We would want it to stay there.

Make dragging starts without "jump"

The trick is to set the subject to have x y properties from the target rect. The relative position will be kept

How about circle?

For circle, we need to change x to cx, y to cy. And it seems working. The relative position is still kept.

We noticed the code is nearly the same as Rect. Can we make it generic?

Support both circle and rect

Just like change from rect to circle, we changed from x to cx, y to cy. This time, we use translate(x, y) to set the x y coordinate transformation. This transform attribute is supported by both rect and circle, so we only need to make one makeDraggable.

How about group?

It also works on <g>. However, we have to make the individual rect and circle undraggable, otherwise the dragged element will be rect or circle instead of the group.