Javascript 通过鼠标拖动以圆周运动相互旋转2个圆

我想通过鼠标拖动使两个圆以圆周运动相互旋转，就像使用jQuery的代码中那样 当我拖动白色球时，它会正确旋转，使红色球也旋转，这就是我所需要的。 我的问题是，当我点击红色球时，它不会旋转，也不会变成白色球。 我想让一个红色的球像一个白色的球，当拖动红色的球时，红色的球和白色的球在白色的球的情况下像鼠标一样旋转

如果有一个代码做同样的事情，请与我分享

var circle=document.getElementById（'circle'），
picker=document.getElementById（'picker'），
pickerCircle=picker.firstElementChild，
rect=circle.getBoundingClientRect（），
中心={
x:rect.left+rect.width/2，
y:rect.top+rect.height/2
},
transform=（函数（）{
var prefs=['t'，'WebkitT'，'MozT'，'msT'，'OT']，
style=document.documentElement.style，
P
for（变量i=0，len=prefs.length；i

#圆圈{
位置：相对位置；
宽度：300px；
高度：300px；
边界半径：50%；
背景：#000；
}
#圈入{
位置：绝对位置；
顶部：35px；
左：35px；
宽度：230px；
高度：230像素；
边界半径：50%；
背景：#fff；
}
#采摘者{
位置：绝对位置；
最高：50%；
左：50%；
高度：30px；
利润上限：-15px；
宽度：50%；
变换原点：左中；
}
#选择器圆{
宽度：30px；
高度：30px；
边界半径：50%；
背景：#fff；
保证金：0 3px 0自动；
光标：移动；
}
#选择器2{
位置：绝对位置；
前-200%；
左-100%；
高度：30px；
利润上限：-10px；
宽度：50%；
变换原点：中间偏右；
}
#picker-circle2{
宽度：30px；
高度：30px；
边界半径：50%；
背景：红色；
保证金：0 3px 0自动；
光标：移动；
}