JSFiddle - React, Tailwind, and code Playground

by Emre

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

$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase()); 

var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
    $('#piece')
        .draggable({
        	stop: (evt, ui) => {
          	console.log(evt, ui);
          }
        })
        .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());
            }
            
            var off_x = parseInt($(event.target).attr("x"));
            var off_y = parseInt($(event.target).attr("y"));
            
            if($.browser.chrome){
               t.getItem(0).setTranslate(ui.position.left-off_x, ui.position.top-off_y);
            } else {
                 t.getItem(0).setTranslate(ui.position.left, ui.position.top);
            }
            
           
        });
};
$('#canvas').svg({onLoad: svgOnLoad});