Question

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

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

我有一个计算行星轨道http://www.stjarnhimlen.se/comp/ppcomp.html的网站，如果我能弄清楚如何用坐标检查约束可拖动对象，我认为应该帮助我Calculating point on a circle's circumference from angle in C#?

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

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

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

HTML

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

的js

 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/

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

0 个答案: