jquery - 按引导点拖动 div(就像水中的船一样)

Question

我尝试让 div 像小船一样在水中拖动，但在正确旋转方面遇到了一些麻烦。

这是我到目前为止所拥有的:
<强> jsFiddle

JS

var start, stop;
$('#canoe').draggable({
    containment: '#board',
    cursor: 'none',
    cursorAt: {
        top: 5
    },
    drag: function (event, ui) {
        start = ui.position.left;
        setTimeout(function () {
            stop = ui.position.left;
        }, 150);
        $('#canoe').css({
            'transform': 'rotate(' + (start - stop) + 'deg)'
        });
    }
});

CSS

#board {
    height:100%;
    width:100%;
    background:blue;
}
#canoe {
    background: #fff;
    border-radius:100% 100% 100% 100%;
    height:60px;
    width:10px;
    position:absolute;
    left:50%;
    bottom:0;
    transform-origin:top center;
    transition: transform .2s;
}

HTML

<div id="board">
    <div id="canoe">A</div>
</div>

有没有更好的方法来设置旋转，以便船的前部始终领先，即使是 360 度旋转？

其他上下文:我正在开发 Basic Game

赏金更新: 我需要“船”能够在一个连续的运动中拖动一圈，而无需翻转/切换旋转方向。

Answer 1

您需要:

• 每次改变时存储位置
• 在变化时，计算所述位置之间的线的角度
• 保存最后的位置

http://jsfiddle.net/AstDerek/799Tp/

Action 看起来并不柔和，但更接近你想要的。

如果你想模拟水阻力，你需要减少一些角度的变化，然后使用一些时间间隔或类似的方式在拖动结束后继续移动，直到船的角度与它应该的角度相匹配已经，或者一个新的拖动事件开始。