DRAGCOLOR

https://github.com/Shopify/draggable#install http://madrobby.github.io/scriptaculous/draggable/ <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> // coordinates https://jsfiddle.net/davidThomas/DGbT3/ https://jsfiddle.net/gabrieleromanato/MxYGZ/

by DOK_UA

HTML

<div id = "background">


 <div id="rotateable">
      <div id="rotate"></div>
  </div>

<div id="joy">
</div>

</div>

CSS

body {
  background: #282828;
}

#background{
  height: 300px;
  width: 300px;
  background-color: gray;
  position:absolute
}

#joy {
  margin:120px 0px 0px 120px;
  width:60px;
  height:60px;
  position: absolute;
  border-radius: 50%;
  background: white;
}

#rotateable,#rotate {
  width:300px;
  height:300px;
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(90deg, #222, #444, #222);
}

JavaScript

$('#joy').draggable({ 
revert: 'invalid',
revertDuration: 100,
});
$('#rotateable').draggable({
  handle: '#rotate',
  opacity: 0.0001,
  helper: 'clone',
  drag: function(event) {
    var // get center of div to rotate
      pw = document.getElementById('rotateable'),
      pwBox = pw.getBoundingClientRect(),
    
      center_x = (pwBox.left + pwBox.right) / 2,
      center_y = (pwBox.top + pwBox.bottom) / 2,
      // get mouse position
      mouse_x = event.pageX,
      mouse_y = event.pageY,
      radians = Math.atan2(mouse_x - center_x, mouse_y - center_y),
      degree = Math.round((radians * (180 / Math.PI) * -1) + 100);
    
   // alert(center_x);
    var rotateCSS = 'rotate(' + (degree + 170) + 'deg)';
    $('#rotateable').css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});