Drag div durch den führenden Punkt (wie ein Boot in Wasser)

Question

Ich versuche, ein div zu bekommen, ähnlich wie ein Boot durch Wasser zu ziehen, aber ich habe einige Probleme, die Rotation richtig zu bekommen. Hier

ist das, was ich bisher:
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> 

Gibt es einen besseren Weg, um die Rotation so einzurichten, dass die Vorderseite des Bootes auch bei einer 360 ° -Drehung immer vorne liegt?

Zusätzlicher Kontext: Ich arbeite an einer Basic Game

Bounty Update: ich das „Boot“ muß in die Lage in einem Kreis in einer kontinuierlichen Bewegung gezogen werden, ohne Umklappen/Umschalten der Drehrichtung.

Answer 1

Es ist ein bisschen komplizierter, aber hier ist, wie ich es tun würde:

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); 
    } 
}); 

FIDDLE

Sie die aktuelle Mausposition, wo das Zentrum des Kanus vergleicht vor einiger gegebenen Zeit war.
Die Zeit wird basierend darauf, wie schnell die Maus bewegt, so langsamer Bewegungen einen längeren benötigen Timeout usw.

Es ist auch eine gute Idee, die Timeouts zu löschen, so dass sie nach oben nicht bauen können, auch wenn es wasn‘ t wirklich Problem, wenn ich dies getestet habe, und die Verwendung von stellt sicher, dass es immer eine positive ganze Zahl ist.

Ich habe dem CSS einige weitere Browserpräfixe hinzugefügt.

Answer 2

Sie müssen:

• Shop position jedes Mal
• bei Änderung ändert, berechnen den Winkel der Linie zwischen den Positionen sagte
• Speichern letzte position

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

Bewegung sieht nicht weich aus, aber ich Näher an dem, was Sie wollen.

Wenn Sie den Wasserwiderstand simulieren möchten, müssen Sie die Winkeländerung um einen Faktor reduzieren und dann ein Zeitintervall o.ä. verwenden, um die Bewegung nach dem Ziehen fortzusetzen, bis der Winkel des Schiffes dem Winkel entspricht sollte haben, oder ein neues Ziehereignis beginnt.