Moving SVG Elements Using Mouse Events

This is taken from a tutorial here: Dragging SVG Elements

This picture of two rectangles is actually three rectangles in the code - one of them is the background. Classes change the cursor to show when something can and cannot be dragged.

At this stage of the tutorial the author, Peter Collingridge, makes the following point:

Now when you drag, the rect element moves with your mouse. Unfortunately, it positions the corner of the rect where your mouse is, even if you select the center of the rect.

He goes on to discuss other issues which need attending to. However, I think that for my present purpose...moving the points in a bezier curve, the code we have arrived at so far might be good enough.