jquery movimenti trascinabili su 30 gradi solo

Question

Voglio un selettore che si muova su una barra a 30 gradi, ho fatto qualche ricerca sul web ma non sono riuscito a trovare alcuna soluzione !.

So che:

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

lo sposta sull'asse xe:

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

lo sposta sull'asse y ma la domanda è come muoversi su angolo di 30 gradi solo?

voglio fare questo lavoro menu.

Answer 1

In realtà, è abbastanza facile!
Tutto quello che dovete fare è controllare la posizione del vostro elemento in caso drag, e un po 'di trigonometria farà il duro lavoro per voi ...

---

Modificato:
Ecco il original answer
Ecco la 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>