JSFiddle - React, Tailwind, and code Playground

HTML

<svg id="svg" width="800" height="800" style="border: 1px dashed black;"
	onmousemove="move(evt)" onmouseup="endMove(evt)" onmouseout="endMove(evt)">

	<rect id="r" x="100" y="100" height="150" width="150" 
	style="border: 1px; background: #f3f3f3;" onmousedown="mouseDown(evt)"/>
		
</svg>

JavaScript

var click=false; // flag to indicate when shape has been clicked
var clickX, clickY; // stores cursor location upon first click
var moveX=0, moveY=0; // keeps track of overall transformation
var lastMoveX=0, lastMoveY=0; // stores previous transformation (move)

var elementWithFocus = null;

	function mouseDown(evt){
		evt.preventDefault();
		click=true;
        elementWithFocus = evt.target;
		clickX = evt.clientX; 
		clickY = evt.clientY;
    }

    function move(evt){
	    evt.preventDefault();
	    if(click){
	        moveX = lastMoveX + ( evt.clientX - clickX );
	        moveY = lastMoveY + ( evt.clientY - clickY );
		    elementWithFocus.setAttribute("transform", "translate(" + moveX + "," + moveY + ")");
	      }
    }

    function endMove(evt){
        if(evt.type == 'mouseout' && click) {
            return;
        }
		click=false;
        elementWithFocus = null;
		lastMoveX = moveX;
		lastMoveY = moveY;
    }