JSFiddle - React, Tailwind, and code Playground

by Sean Furrh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dev.jorneo.com/SuperSimpleSVG.js"></script>
<div id="main"></div>
<svg id="svg" width="100%" height="100%"/>

JavaScript

$(document).ready(function(){
	$("#main").css({border:"1px solid black"}).text("hello");
	var svg = $("#svg").css({border:"1px solid black"});
  var c=new Circle(svg).setCenter(100,100).setWidth(50).setStroke(1).setFill("blue").draw();
  var $c = $(c.getElement()).mousedown(function(){
  	var $dot=$(this)
    console.log($dot.data("moving"));
      $(svg).mousemove(function(e){
        $dot.data("moving",true);
        $dot.attr("cx",e.offsetX);
        $dot.attr("cy",e.offsetY);
      });
   
  }).mouseup(function(){
  	var $dot=$(this)
  	$dot.data("moving",false);
    $(svg).unbind("mousemove");
  })
})

function startDrag($o){
	
}