通过引导点拖动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度旋转？

附加上下文:我正在开发基本游戏

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

Answer 1

这有点复杂，但我会这样做：

var save = false, timer;

$('#canoe').draggable({
    containment: '#board',
    cursor: 'none',
    cursorAt: {
        top: 5
    },
    drag: function (event, 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 );
    }
});

小提琴

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

清除超时也是一个好主意，这样它们就不会累积，即使在我测试时这并不是真正的问题，并且使用 确保Math.abs它始终是正整数。

我向 CSS 添加了更多浏览器前缀。