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

我试着让一个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

赏金更新：
我需要“船”能够在一个连续运动中被拖动成圆圈而不会翻转/切换旋转方向.

解决方法

这有点复杂,但这就是我要做的：

var save = false,timer;

$('#canoe').draggable({
    containment: '#board',ui) {
        if ( !save ) save = ui.offset;
        var canoe    = $('#canoe'),center_x = save.left + 5,center_y = save.top + 30,radians  = Math.atan2(event.pageX - center_x,event.pageY - center_y),degree   = (radians * (180 / Math.PI) * -1) + 180,time     = Math.abs(ui.offset.top-save.top) + Math.abs(ui.offset.left-save.left);

        canoe.css({
            '-moz-transform'    : 'rotate('+degree+'deg)','-webkit-transform' : 'rotate('+degree+'deg)','-o-transform'      : 'rotate('+degree+'deg)','-ms-transform'     : 'rotate('+degree+'deg)'
        });

        timer = setTimeout(function() {
            clearTimeout(timer);
            save = ui.offset;
        },Math.abs( time-300 ) + 400 );
    }
});

FIDDLE

它将当前鼠标位置与独木舟中心的位置进行比较.
时间根据鼠标的移动速度设置,因为较慢的移动需要较长的超时等.

清除超时以便它们不会积累也是一个好主意,即使在我测试它时它并不是真正的问题,并且Math.abs的使用确保它总是一个正整数.

我在CSS中添加了一些浏览器前缀.