JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<div id="canvas" style="width: 100%; height: 100%;">
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    width="450" height="450">
    <rect id="piece" width="50" height="50" x="100" y="100" />
</svg>
</div>

JavaScript

var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
    $('#piece')
        .draggable()
           .on({
                dragstart: function (event, ui) {
                    var tlist = this.transform.baseVal;
                    if (tlist.numberOfItems == 0) {
                        tlist.appendItem(svg.root().createSVGTransform());
                    }
                    var tm = tlist.getItem(0).matrix;
                    var pos = {left: tm.e, top: tm.f};
                    $.data(this, 'originalPosition', pos);
                },
                drag: function (event, ui) {
                    // Update transform manually, since top/left style props don't work on SVG
                    var tlist = this.transform.baseVal;
                    var CTM = this.getCTM();
                    var p = svg.root().createSVGPoint();
                    p.x = ui.position.left + CTM.e;
                    p.y = ui.position.top + CTM.f;
                    if ($.browser.webkit) { // Webkit gets SVG-relative coords, not offset from element
                        var origPos = $.data(this, 'originalPosition');
                        p.x -= ui.originalPosition.left - origPos.left;
                        p.y -= ui.originalPosition.top - origPos.top;
                    }
                    p = p.matrixTransform(CTM.inverse());
                    tlist.getItem(0).setTranslate(p.x, p.y);
                }});
};
$('#canvas').svg({onLoad: svgOnLoad});