JSFiddle - React, Tailwind, and code Playground

by Vasily Kushakov

HTML

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
    <style>
    .draggable {
        cursor: move;
    }
    </style>
    <script type="text/ecmascript">
    < ![CDATA[
        var selectedElement = 0;
        var currentX = 0;
        var currentY = 0;
        var currentMatrix = 0;

        function selectElement(evt) {
            selectedElement = evt.target;
            currentX = evt.clientX;
            currentY = evt.clientY;
            currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7, -1).split(' ');

            for (var i = 0; i < currentMatrix.length; i++) {
                currentMatrix[i] = parseFloat(currentMatrix[i]);
            }

            selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
            selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
            selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
        }

        function moveElement(evt) {
            var dx = evt.clientX - currentX;
            var dy = evt.clientY - currentY;
            currentMatrix[4] += dx;
            currentMatrix[5] += dy;

            selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
            currentX = evt.clientX;
            currentY = evt.clientY;
        }

        function deselectElement(evt) {
            if (selectedElement != 0) {
                selectedElement.removeAttributeNS(null, "onmousemove");
                selectedElement.removeAttributeNS(null, "onmouseout");
                selectedElement.removeAttributeNS(null, "onmouseup");
                selectedElement = 0;
            }
        }

    ]] >
    </script>
    <rect x="0.5" y="0.5" width="399" height="199" fill="none" stroke="black" />
    <rect class="draggable" x="30" y="30" width="80" height="80" fill="blue" transform="matrix(1 0 0 1 25 20)"...