JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://aubergene.com/roller-derby-track/lib/jquery.svg.min.js"></script>
  <svg id="ddd" width="640px" height="480px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border:15px dashed #ccc"> 


    <circle class="skater a" id="a-jammer"   cx="155" cy="155" r="20" /> 
 
    <circle class="skater b" id="b-jammer"   cx="175"   cy="155" r="20" /> 
 
  </svg>

CSS

.a { fill:#c00 }
      .b { fill:#00c }

JavaScript

$('#ddd').svg({onLoad: drawIntro});
 
function drawIntro() {
  // var svg = $("#ddd").svg('get');
  // svg.add($('#ddd'));
 
  $('circle')
    .draggable({cursorAt: { top:20, left:20 }})
    .bind('mousedown', function(event, ui){
      // bring target to front
      $(event.target.parentElement).append( event.target );
    })
    .bind('drag', function(event, ui){
      // update coordinates manually, since top/left style props don't work on SVG
      event.target.setAttribute('cx', ui.position.left);
      event.target.setAttribute('cy', ui.position.top);
      // console.log("left=" + ui.position.left + ", top=" + ui.position.top);
    });
 
};