Jquery Dragabale包含半径

Question

私はジョイスティックの動作をエミュレートしようとしています。ジョイスティックを任意の方向に押すことができますが、スティックをどれだけ離すことができるかには限界があり、スティックを離すと元の位置に戻ります。私はjquery dragableを使用しています。位置を元に戻すのは簡単です。私が直面している問題は、ジョイスティックを円の内側に保つことです。

HTML：

<div class="demo">  

    <div id="draggable4" class="draggable draginvalid ui-widget-content">  
     drag me 
    </div> 


</div> 

JS：

$(".draginvalid").draggable({ 
    distance: 1, 
    revert: "invalid" 
}); 

私は

http://jsfiddle.net/mGWfP/12/

私は行動を達成することができますどのように上の任意のアイデアを、この動作を示すためにバイオリンを持っていますジョイスティックは円の中に含まれていますか？ TIA

Answer 1

ここを開始する場所：

$(".draginvalid").draggable({ 
    distance: 1, 
    revert: "invalid", 
    drag: function(e, d) { 
    console.log(d); 
    d.position.left = Math.max(-40, Math.min(40, d.position.left)); 
    d.position.top = Math.max(-40, Math.min(40, d.position.top)); 
    } 
}); 

それは現在、各方向に40のバリエーションを可能にします。それはコースのサークルではまだ完璧に保っているわけではありませんが、適切な数式であなたはそこに行くことができます。

あなたのコンソールでも見てください。私はあなたがその位置に影響を与えることができるオブジェクトを印刷しています。

・ホープ、このことができます:)

編集：ここ 真円のコードを。内円の位置をちょうど調整する必要があります。真ん中にあるわけではありません。また、ジョイスティックを各方向に動かすことができるピクセルの最大値44を変更する必要があります。

$(".draginvalid").draggable({ 
    distance: 1, 
    revert: "invalid", 
    drag: function(e, d) { 
     maxMove = 44; 
     maxMoveSqr = 44*44; 
     l = d.position.left; 
     t = d.position.top; 
     len = l*l+t*t; 
     if (maxMoveSqr < len) { 
     d.position.left = l/Math.sqrt(len) * maxMove; 
     d.position.top = t/Math.sqrt(len) * maxMove;  
     } 
    } 
}); 

は、最適化すること自由に感じ;）