DRAGCOLOR2

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/droppable.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
<div id = "background">


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

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

</div>

CSS

body {
  background: #282828;
}

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

#joy {
  margin:97px 0px 0px 97px;
  width:100px;
  height:100px;
  position: absolute;
  border-radius: 50%;
  background-color: hsl(0, 50%, 50%);
  border-style: solid;
  border-color:black;
  border-width:3px;
  

}

#rotateable,#rotate {
  width:300px;
  height:300px;
  position: absolute;
  border-radius: 50%;
  background: black;
}

p {
 color:red;
}

JavaScript

//try{  } catch(err){alert(err.message)

var H = 120;
var S = 50;
var V = 50;

var newH = H;
var newS = S;
var newV = V;

var ratio = 0.2;


var firstHsv = "hsl("+H+","+S+"%,"+V+"%)";


function setColor(hue,sat,vol)
{

}


$("div").mouseup(function(){
 	$("#rotate").css("background-color", firstHsv);
  $("#joy").css("border-width", 3);
  });
  $("div").mousedown(function(){
   $("#joy").css("border-width", 0);
	$("#rotate").css("background-color", firstHsv);
  });


$('#joy').draggable({ 
revert: 'invalid',
revertDuration: 100,
drag: function(event) {
//alert("helolo")
joyPoint = document.getElementById('joy'),
getJoyBounds = joyPoint.getBoundingClientRect();
center_x = ((getJoyBounds.left + getJoyBounds.right) / 2)-150,
center_y = 150-(getJoyBounds.top + getJoyBounds.bottom) / 2;

//разобратся в процентах от расположения
var percentSat = (150*center_x)/100/2;
var percentVol = (150*center_y)/100/2;

//$("p").text(percentSat+" / "+percentVol+" / "+V);

var newSaturation = S+percentSat;
var newVolune = S+percentVol; 
var hsvChange = "hsl("+H+","+newSaturation+"%,"+newVolune+"%)";
  firstHsv = hsvChange;
$("#joy").css("background-color", hsvChange);

}
});
$('#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(mouse_x);
    var rotateCSS = 'rotate(' + (degree + 170) + 'deg)';
    $('#rotateable').css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
  }
});