JSFiddle - React, Tailwind, and code Playground

by melvinT

HTML

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" onload="makeDraggable4(evt)">    
    <script type="text/javascript"><![CDATA[
      function makeDraggable4(evt) {
        var svg = evt.target;
        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);
        svg.addEventListener('mouseleave', endDrag);

        function getMousePosition(evt) {
          var CTM = svg.getScreenCTM();
          return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
          };
        }

        var selectedElement, offset;

        function startDrag(evt) {
          if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);
            offset.x -= parseFloat(selectedElement.getAttributeNS(null, "cx"));
            offset.y -= parseFloat(selectedElement.getAttributeNS(null, "cy"));
          }
        }

        function drag(evt) {
          if (selectedElement) {
            evt.preventDefault();
            var coord = getMousePosition(evt);
            selectedElement.setAttributeNS(null, "cx", coord.x - offset.x);
            selectedElement.setAttributeNS(null, "cy", coord.y - offset.y);
          }
        }

        function endDrag(evt) {
          selectedElement = null;
        }
      }
    ]]> </script>
    

  <style>
 
  </style>


	<circle class="draggable" cx="25" cy="25" r="3" id="dot" fill="red" stroke="black" stroke-width="1"/>
	<circle class="draggable" cx="16" cy="9" r="3" id="dot" fill="purple" stroke="gold" stroke-width="1"/>
	<circle class="draggable" cx="17" cy="36" r="3" id="dot" fill="yellow" stroke="pink" stroke-width="1"/>


</svg>