JSFiddle - React, Tailwind, and code Playground

by DOK_UA

HTML

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="svg"></div>
 
</body>
</html>

CSS

svg {
  position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

   background-color:#333333;
}

JavaScript

var svgSize = 300;
var sizeCorectorX;
var sizeCorectorY;
$(window).resize(function() {
  var windowWidth = $(window).width();
  var windowHeight = $(window).height();
  sizeCorectorX = svgSize/windowWidth; 
  sizeCorectorY = svgSize/windowHeight;
  });
  

var svgCenter = svgSize/2;
var joyDiam = 50;
var rotateColorRadius = (svgSize*0.8)/2;

var svgText = "";
var joyColor = 'red';
var rotateColor = 'blue';

var windowWidth = $(window).width();
var windowHeight = $(window).height();  

var svgHead = '<svg width="'+svgSize+'" height="'+svgSize+'version="1.1" viewBox="0 0 300 300">';
var joy = '<circle id = "joy" cx="'+svgCenter+'" cy="'+svgCenter+'" r="'+joyDiam+'"/>';
var rotate = '<circle id = "rotate" cx="'+svgCenter+'" cy="'+svgCenter+'" r="'+rotateColorRadius+'"/>';
var svgEnd = '</svg>';

var svgArray = [svgHead,rotate,joy,svgEnd];

for (var i=0; i<svgArray.length; i++)
{
svgText += svgArray[i];
}
jQuery('#svg').html(svgText);



$("#joy").css({ fill:joyColor});
$("#rotate").css({ fill:rotateColor});




$( "#joy" )
  .mouseup(function() {
  	$('#joy').off('mousemove'); // удаляет функцию маус муф после того как отпускаем мышь
    $("#joy").css({ cx:svgCenter});
    $("#joy").css({ cy:svgCenter});
  })
  .mousedown(function(event) {
    $( "#joy" ).mousemove(function( event ) {
  $("#joy").css({ cx:event.clientX*sizeCorectorX});
  $("#joy").css({ cy:event.clientY*sizeCorectorY});
if (event.clientX*sizeCorectorX<svgSize*0.1 || event.clientY*sizeCorectorY<svgSize*0.1 || event.clientX*sizeCorectorX>svgSize*0.9 || event.clientY*sizeCorectorY>svgSize*0.9)
{
$('#joy').off('mousemove'); // удаляет функцию маус муф после того как отпускаем мышь
    $("#joy").css({ cx:svgCenter});
    $("#joy").css({ cy:svgCenter});
}


});
     console.log( "Mouse down" );
  });


//$(window).width();
//$(window).height();