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 ddData = {
		element: null,
		initialX: 0,
		initialY: 0, 
		originalX: 0,
		originalY: 0
	};
	//start move	
	shape.onmousedown = function(evt) {
		var evt = evt || window.event;
		ddData.element = evt.target || evt.srcElement;
		ddData.initialX = evt.clientX;
		ddData.initialY = evt.clientY;
		ddData.originalX = parseFloat(
			ddData.element.getAttributeNS(null, "cx"));
		ddData.originalY = parseFloat(
			ddData.element.getAttributeNS(null, "cy"));
	};
	
	svg.onmousemove = function(evt) {
		var evt = evt || window.event;
		if (ddData.element) {
			var posX = ddData.originalX + evt.clientX - ddData.initialX;
			var posY = ddData.originalY + evt.clientY - ddData.initialY;
			
			//move object
			ddData.element.setAttributeNS(null, "cx", posX);
			ddData.element.setAttributeNS(null, "cy", posY);		
		}
	}	
    
	//stops drag movement
	svg.onmouseup = function(evt) {
		var evt = evt || window.event;
		ddData.element = null;
	}