JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragable" contenteditable="true">Процесс 1
</div>
<svg id="awesomeco" style="position:relative" height="300" width="300">
	Sorry, your browser does not support inline SVG.
	<g>
	    <rect id="square" class="dragable" style="fill:lawngreen"				
		    x="5%" y="5%" height="30%" width="30%"> 
	    </rect>
	    <text x="10%" y="10%">сыр</text>
	</g>
</svg>

CSS

div{
    background:violet;
    border:solid dimgray 2px;
    width:120px;
    height:70px;
    text-align:center;    
    font-weight: bold;
    color: dimgray;
}
// Как по вертикали текст выровныть не знаю

JavaScript

var $itWorked, deltaX, deltaY;
$(document).ready(function(){        
		$(".dragable").mousedown(function(e){            
            
			e.stopPropagation();
			$itWorked=$(this);
			
			
            deltaX = e.pageX - $(this).offset().left;
            deltaY = e.pageY - $(this).offset().top;		
            $(document).mousemove(function(e) {
                $itWorked.offset({top: e.pageY - deltaY, left: e.pageX - deltaX});
				$itWorked.attr("y",e.pageY - deltaY);
				$itWorked.attr("x",e.pageX - deltaX);
				console.log("x=",$itWorked.attr("x"),", y=",$itWorked.attr("y"));
            });
        });
	

        $(document).mouseup(function() {
            $(document).unbind("mousemove");
            $itWorked=null;
        });		
});