jquery ziehbare bewegt sich auf 30 Grad nur

Question

Ich möchte einen Selektor, der auf einer Stange auf 30 Grad Winkel bewegt, habe ich einige Nachforschungen im Internet gemacht, aber ich konnte keine Lösung finden !.

Ich weiß, dass:

$(".selector").draggable({ axis: 'y' }); 

wird es auf der y-Achse bewegen, aber die Frage ist, wie es nur auf 30-Grad-Winkel zu bewegen:

$(".selector").draggable({ axis: 'x' }); 

es auf x-Achse und bewegen?

Ich möchte dieses Menü funktioniert.

Answer 1

In der Tat, es ist ziemlich einfach!
Alles, was Sie tun müssen, ist die Position Ihres Element im Falle drag zu steuern, und ein wenig Trigonometrie wird für Sie ...

---

Edited die harte Arbeit tun:
Hier die original answer
Hier ist die new one

---

var rad = Math.PI/180; 
 

 
$("#Handle").draggable(
 
{ 
 
    drag: function(event, ui) 
 
    { 
 
     var offset = 
 
     { 
 
      x: ui.offset.left - ui.originalPosition.left, 
 
      y: ui.offset.top - ui.originalPosition.top 
 
     }; 
 
     
 
     var distance = Math.sqrt(offset.x * offset.x + offset.y * offset.y); 
 
     distance = Math.min(distance, 150); 
 
     
 
     var angle; 
 
     
 
      if (offset.y > 0) { angle = 90 * rad; } // Moving downwards 
 
     else if (offset.x < 0) { angle = 210 * rad; } // Moving leftwards 
 
     else     { angle = 330 * rad; } // Moving rightwards 
 
     
 
     ui.position.top = Math.sin(angle) * distance + ui.originalPosition.top; 
 
     ui.position.left = Math.cos(angle) * distance + ui.originalPosition.left; 
 
    } 
 
});

body { margin: 0; } 
 
#Handle 
 
{ 
 
    top: 150px; 
 
    left: 200px; 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: red; 
 
} 
 

 
#Background 
 
{ 
 
    position: absolute; 
 
    top: 150px; 
 
    left: 200px; 
 
} 
 

 
#Background .bottom, 
 
#Background .left, 
 
#Background .right 
 
{ 
 
    transform-origin: top left; 
 
    width: 150px; 
 
    height: 1px; 
 
    background-color: blue; 
 
} 
 

 
#Background .bottom { transform: rotate(90deg); } 
 
#Background .left { transform: rotate(210deg); } 
 
#Background .right { transform: rotate(330deg); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 

 
<div id="Background"> 
 
    <div class="right"></div> 
 
    <div class="bottom"></div> 
 
    <div class="left"></div> 
 
</div> 
 

 
<div id="Handle"></div>