Rotate 2 circles with each other in circular motion by mouse drag

Question

I want to rotate 2 circles around each other in a circular motion by mouse drag like in this code using jQuery When I drag the white ball it rotates correctly and makes red ball rotate also and that what I need. My problem is that when I click on red ball it doesn't rotate and doesn't make as the white ball. I want to make a red ball like a white ball exactly that when drag red ball the red ball and white ball rotate with mouse like in white-ball case.

https://jsfiddle.net/Sarah_Lotfy/h1ye8Ld3/4/

If there is a code that does the same thing please share it with me

var circle = document.getElementById('circle'),
    picker = document.getElementById('picker'),
    pickerCircle = picker.firstElementChild,
    rect = circle.getBoundingClientRect(),
                
    center = {
      x: rect.left + rect.width / 2,
      y: rect.top + rect.height / 2
    },
                
    transform = (function(){
      var prefs = ['t', 'WebkitT', 'MozT', 'msT', 'OT'],
          style = document.documentElement.style,
          p;
      for (var i = 0, len = prefs.length; i < len; i++){
        if ( (p = prefs[i] + 'ransform') in  style ) return p
      }
                    
      alert('your browser doesnt support css transforms!')
    })(),
                
    rotate = function(x, y){
      var deltaX = x - center.x,
          deltaY = y - center.y,      
          angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI
      return angle
    },
                
    // DRAGSTART
    mousedown = function(event){
      event.preventDefault()
      document.body.style.cursor = 'move'
      mousemove(event)
      document.addEventListener('mousemove', mousemove)
      document.addEventListener('mouseup', mouseup)
    },
            
    // DRAG
    mousemove = function(event){
      picker.style[transform] = 'rotate(' + rotate(event.x, event.y) + 'deg)'
    },
            
    // DRAGEND
    mouseup = function(){
      document.body.style.cursor = null;
      document.removeEventListener('mouseup', mouseup)
      document.removeEventListener('mousemove', mousemove)
    }
                        
    // DRAG START
    pickerCircle.addEventListener('mousedown', mousedown)
            
    // ENABLE STARTING THE DRAG IN THE BLACK CIRCLE
    circle.addEventListener('mousedown', function(event){
      if(event.target == this) mousedown(event)
    })

#circle{
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #000;
}
        
#circle-in{
  position: absolute;
  top: 35px;
  left: 35px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: #fff;
}
        
#picker{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30px;
  margin-top: -15px;
  width: 50%;
  transform-origin: center left;
}
        
#picker-circle{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  margin: 0 3px 0 auto;
  cursor: move;
}
#picker2{
position: absolute;
top: -200%;
left: -100%;
height: 30px;
margin-top: -10px;
width: 50%;
transform-origin: center right ;
}
#picker-circle2{
width: 30px;
height: 30px;
border-radius: 50%;
background: red;
margin: 0 3px 0 auto;
cursor: move;
}

<div id="circle">
  <div id="circle-in"></div>
  <div id="picker">
     <div id="picker-circle"></div>
  </div>
  <div id="picker2">
     <div id="picker-circle2"></div>
  </div>
</div>