限制jquery可拖动以仅保留在圆的路径上

因此，我试图制造一些用户能够沿其轨道拖动行星的东西，并且它将不断更新其他行星。 理想情况下，我希望这也适用于省略号。

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

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

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

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

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

HTML

JS

  var $newPosX = 100, $newPosY = 100; //create image node var x = document.createElement("IMG"); x.src = "http://sofzh.miximages.com/javascript/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/