javascript - jquery 可拖动仅移动 30 度

Question

我想要一个在 30 度 Angular 的条上移动的选择器，我在网上做了一些研究，但我找不到任何解决方案!。

我知道:

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

将在 x 轴上移动它并:

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

将在 y 轴上移动它，但问题是如何仅在 30 度 Angular 上移动它？

我想让这个菜单起作用。

Answer 1

其实很简单!
您所要做的就是控制您的元素在 drag 事件中的位置，一点三 Angular 学将为您完成这项艰巨的工作...

---

已编辑:
这是 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>