jquery sürüklenebilir sadece 30 derece hareket eder

Question

30 Derece açılı bir çubuk üzerinde hareket eden bir seçici istiyorum, web üzerinde bazı araştırmalar yaptım ama herhangi bir çözüm bulamadım !.

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

y ekseni üzerinde hareket edecek ama soru sadece 30 derecelik bir açıyla taşımak için yapılması gerekenler:

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

x ekseni üzerinde hareket edecek ve:

bunu biliyorum?

Bu menü işi yapmak istiyorum. Aslında

Answer 1

, oldukça kolay! İşte
: ...

---

Düzenlendi
yapmanız gereken tek şey drag olay senin elemanın konumunu kontrol ve trigonometri biraz sizin için zor işi yapacak İşte original answer
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>

olduğunu