jquery - Drag div by leading point (like a boat in water) -

I am trying to draw the device like a boat with water, but I'm having some problems rotation right.

Even though I still have:

JS

  var start, stop ; $ ('# Dongo'). Draggable (prevention: '#bird', cursor: 'none', cursorYou: {top: 5}, drag: function (event, UI) {start = ui.position.left; setTimeout (function () {stop = Ui.position.left;}, 150); $ ('# canoe'). CSS ({'transform': 'rotate (' + (start - stop) 'degree)'});}});   
 css  
  #board {height: 100%; Width: 100%; Background: blue; } # Canoe {background: #fff; Limit-Radius: 100% 100% 100% 100%; Height: 60px; Width: 10px; Status: Completed; Left: 50%; Bottom: 0; Change-Origin: Top Center; Transition: Falling .2s; }   
 HTML  
  & lt; Div id = "board" & gt; & Lt; Div id = "canoe" & gt; A & lt; / Div & gt; & Lt; / Div & gt;   
 Is there a better way to establish rotation so that the front of the boat is always leading with 360 degree rotation?  
  Additional context:  I'm working on the    
  Bounty Update:  "Which can be pulled into one of the circles in a continuous motion without flipping / switching in a cyclical direction.   
 
 
 This is a bit more complicated, but how do I do it here:  
  var save = false, timer; $ ('# Dongo'). Draggable ({prevention: '# board', cursor: 'none', cursor you: {top: 5}, drag: function (event, UI) {if (! Save) save = ui offset; var cano = $ (' # Dongo '), center_x = save. Left + 5, center_y = save. + 30, radian = monastery.tar 2 (event.pagex - center_x, event.pagewise - center_Y), degree = (radians * (180 / Math) .pi) * -1) + 180, time = Math. Box (ui.offset.top-save.top) + Math.base (ui.offset.left-save.left); canoe.css ({'-moz -transform ':' rotate ('+ degree +' degree) ',' webket-transform ':' rotate ('+ deg) ('+ Degree +' degree) ',' MMS-transform ':' rotate ('+ degree +' degree) '); timer = set timeout (Function () {explicit timeout (timer); save = ui.offset;}, Math .abs (Time-300) + 400);}});   
  
 This was compared to the current mouse position where the canoe center was sometime ago. 
 The speed is set on the basis of the mouse speed, such as slow speeds, a more timeout, etc. will be required.  
 It is a good idea to clear the time clearing, so they do not make it, even if it was not really a problem, when I tested it and  math.abs  The use ensures that it is always a positive integer.  
 I've added some browser prefixes to CSS.