限制 jquery Draggable 只停留在圆的路径上

Question

因此，我试图制作一些东西，让用户能够沿着其轨道拖动行星，并且它将不断更新其他行星。理想情况下，我希望它也适用于椭圆。

到目前为止，我可以使用 jquery 拖动图像节点并检查/更改坐标，但是当用户拖动对象时我无法可靠地更新位置。我知道有一个可拖动的axis矩形containment，但这并没有真正帮助我。

我有一个用于计算行星轨道的网站http://www.stjarnhimlen.se/comp/ppcomp.html和一个我认为应该帮助我的公式，如果我能弄清楚如何通过坐标检查来约束可拖动对象计算圆上的点C# 中角度的周长？

但似乎应该有一种更简单的方法让用户沿着圆形轨道拖动球体，同时更新其他球体的坐标

这是我到目前为止所拥有的。并不多

http://jsfiddle.net/b3247uc2/2/

网页

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

杰斯

 var $newPosX = 100,
    $newPosY = 100;

//create image node
var x = document.createElement("IMG");
x.src = "http://upload.wikimedia.org/wikipedia/commons/a/a4/Sol_de_Mayo_Bandera_Argentina.png";
x.width = 100;
x.height = 100;
x.id = "sun";
x.hspace = 100;
x.vspace = 100;
document.body.appendChild(x);

//coords
var text = document.createTextNode($newPosX + " " + $newPosY);
document.body.appendChild(text);

//make sun draggable and update coords
$("#sun").draggable({
    drag: function (event, ui) {
        $newPosX = $(this).offset().left;
        $newPosY = $(this).offset().top;
    }
});

//0 millisecond update for displayed coords
setInterval(check, 0);

function check() {
    //tries to constrain movement, doesn't work well
    /*
    if ($newPosX > 300) {
        $("#sun").offset({
            left: 200
        });
    }
    */
    text.nodeValue = ($newPosX + " " + $newPosY);
}

编辑：我发现了这个，并试图修改它以适合我的目的，但到目前为止还没有运气。 http://jsfiddle.net/7Asn6/

好的，所以我把它拖了

http://jsfiddle.net/7Asn6/103/

这与我想要的非常接近，但可以在不直接单击的情况下移动

http://jsfiddle.net/7Asn6/104/

好的，对这个问题进行最后的编辑。这个似乎运作良好并解决了我的问题。我还是很想听听大家的实现想法或者想法，让其工作更加顺利。

http://jsfiddle.net/7Asn6/106/