JSFiddle - React, Tailwind, and code Playground

HTML

<svg width=90% height=500px>
    <rect ry=0 rx=0 x=50 y=50 width=90% height=50px fill=HoneyDew />
    <rect ry=0 rx=0 x=50 y=120 width=90% height=400px fill=HoneyDew />
    <rect id="rect1" ry=0 rx=0 x=50 y=50 width=20px height=20px fill=red />
    <rect id="rect2" ry=0 rx=0 x=80 y=50 width=20px height=20px fill=blue />
    <rect id="rect3" ry=0 rx=0 x=110 y=50 width=20px height=20px fill=green />
</svg>

JavaScript

var svg = document.querySelector('svg');

//create circle
var shape = document.createElementNS(
    "http://www.w3.org/2000/svg", "circle");

shape.setAttributeNS(null, "cx", 20);
shape.setAttributeNS(null, "cy", 20);
shape.setAttributeNS(null, "r", 10);
shape.setAttributeNS(null, "fill", "green");
shape.setAttributeNS(null, "class", "draggable");

//var shape = document.getElementsByTagName('rect1');
svg.appendChild(shape);

var rects = document.querySelectorAll('rect');
for (var i = 0; i < rects.length; i++) {
    rects[i].addEventListener('mousedown', mousedown);
}
shape.addEventListener('mousedown', mousedown);
var ddData = {
    element: null,
    initialX: 0,
    initialY: 0,
    originalX: 0,
    originalY: 0
};



//start move	
function mousedown(evt) {

    var evt = evt || window.event;
    ddData.element = this;
    ddData.initialX = evt.clientX;
    ddData.initialY = evt.clientY;
    ddData.originalX = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'x' : 'cx'));
    ddData.originalY = parseFloat(ddData.element.getAttributeNS(null, this.tagName == 'rect' ? 'y' : "cy"));
};

svg.onmousemove = function (evt) {

    var evt = evt || window.event;
    var el = ddData.element;
    if (el) {
        var posX = ddData.originalX + evt.clientX - ddData.initialX;
        var posY = ddData.originalY + evt.clientY - ddData.initialY;
        if (el.tagName == 'rect') {
            //move object
            el.setAttributeNS(null, "x", posX);
            el.setAttributeNS(null, "y", posY);

        } else {
            el.setAttributeNS(null, "cx", posX);
            el.setAttributeNS(null, "cy", posY);
        }
    }
}

//stops drag movement
svg.onmouseup = function (evt) {
    var evt = evt || window.event;
    ddData.element = null;
}