JSFiddle - React, Tailwind, and code Playground

by rrthomas

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()
        .bind('drag', function (event, ui) {
            // Update transform manually, since top/left style props don't work on SVG
            var t = event.target.transform.baseVal;
            if (t.numberOfItems == 0) {
                t.appendItem(svg.root().createSVGTransform());
            }
            t.getItem(0).setTranslate(ui.position.left, ui.position.top);
        });
};
$('#canvas').svg({onLoad: svgOnLoad});