JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containment-wrapper" class="wrap">

    
    <svg style="background-color:white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="640" height="335">
        <g>
            <g id="svg_1">
                <image xlink:href="https://static.sscontent.com/prozis/contents/sport_events/dorsal_149_1280x670_22204_57712.png" id="svg_2"
                       height="335" width="670" y="0" x="0"/>
                <g>
                    <text y=22 x="0"
                          style="text-anchor:start; font-family:Arial, sans-serif; font-size:20px; font-weight:bold; fill:#000000; "
                          id="fullname">CHARO PALOMO
                    </text>
                </g>
            </g>
        </g>
    </svg>

</div>

CSS

.wrap{
    
    width:300px;
    height:300px;
    background: red;
}

JavaScript

$('text')
.draggable({containment: "containment-wrapper", scroll: false})
   .bind('mousedown', function(event, ui){
    // bring target to front
    $(event.target.parentElement).append( event.target );
   })
   .bind('drag', function(event, ui){
    // update coordinates manually, since top/left style props don't work on SVG
    event.target.setAttribute('x', ui.position.left);
    event.target.setAttribute('y', ui.position.top);
});