अग्रणी बिंदु (पानी में एक नाव की तरह) द्वारा खींचें

Question

मैं पानी के माध्यम से नाव की तरह खींचने के लिए एक div प्राप्त करने का प्रयास कर रहा हूं, लेकिन मुझे घूर्णन सही होने में कुछ परेशानी हो रही है।

यहाँ मैं अब तक है:
jsFiddle

जे एस

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

सीएसएस

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

एचटीएमएल

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

क्या रोटेशन सेट अप करने का कोई बेहतर तरीका है ताकि नाव के सामने हमेशा 360 डिग्री रोटेशन के साथ अग्रणी हो?

अतिरिक्त प्रसंग: मैं एक Basic Game

बाउंटी अद्यतन पर काम कर रहा हूँ: मैं "नाव" flipping के बिना एक सतत गति में एक सर्कल में घसीटा जा करने के लिए सक्षम होना चाहिए/घूर्णन दिशा स्विचिंग।

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

FIDDLE

यह करने के लिए जहां डोंगी के केंद्र कुछ निश्चित समय पहले किया गया था वर्तमान माउस स्थिति तुलना करती है।
समय, कितनी तेजी से माउस चालें के आधार पर सेट कर दिया जाता धीमी आंदोलनों एक लंबे समय तक की आवश्यकता होगी के रूप में टाइमआउट आदि

यह भी समय समाप्ति स्पष्ट करने के लिए तो वे का निर्माण नहीं है एक अच्छा विचार है, भले ही यह wasn 'है, जब मैंने इसका परीक्षण किया तो वास्तव में समस्या नहीं आई, और Math.abs का उपयोग यह सुनिश्चित करता है कि यह हमेशा एक सकारात्मक पूर्णांक होता है।

मैंने सीएसएस में कुछ और ब्राउज़र उपसर्ग जोड़े।

Answer 2

आप की जरूरत है:

• स्टोर position हर बार यह परिवर्तन
• परिवर्तन में लाइन के कोण की गणना के बीच कहा पदों
• सहेजें पिछले position

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

आंदोलन नरम नहीं दिखता है लेकिन मैं आप जो चाहते हैं उसके करीब है।

यदि आप पानी के ड्रैग को अनुकरण करना चाहते हैं, तो आपको कुछ कारकों द्वारा कोण परिवर्तन को कम करने की आवश्यकता होगी, फिर खींचने के बाद कुछ समय अंतराल या आंदोलन जारी रखने के समान ही उपयोग करें, जब तक कि जहाज का कोण कोण से मेल नहीं खाता होना चाहिए, या एक नया ड्रैग घटना शुरू होनी चाहिए।