jQuery可拖动仅沿30度移动。

Question

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

我知道：

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

将其沿着x轴移动：

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

将其在y轴上移动，但问题是如何只将其移动30度角？

我想让这个菜单工作。

- Madian Malfi

---

我很好奇这是否可行，或者您需要一些定制的解决方案。 - Abdul Ahmad

正如 https://jqueryui.com/droppable/ 所示，目前还没有解决方案，因此我认为我需要自定义解决方案，但不确定。 - Madian Malfi

你尝试过创建一个对角线元素并将其设置为包含元素吗？ - Kathy

我真是太蠢了！肯定会行的，让我试试看。 - Madian Malfi

它确实起作用了，我将容器旋转了30度，它可以工作，但是它会超出容器范围然后再回到内部，然后到达边界时不是30度的尖锐运动，也不在一条直线上 :/ - Madian Malfi

Answer 1

事实上，这很容易！
你所要做的就是在“拖动”事件中控制元素的位置，一些三角函数会为你完成繁重的工作...

---

编辑：
这是原始答案
这是新的答案

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>

- NemoStein

---

谢谢，这正是我所要求的。我能不能使其沿着三个方向移动，分别为30度、150度和90度？我已经更新了一张图片来说明我的意图。感谢你的帮助。 - Madian Malfi

你的菜单很有趣... =D 你可以检查 offset.x 和 offset.y 是否为正数或负数来改变角度锁定... 我会尝试更新我的 fiddle。 - NemoStein

发布新代码后的几秒钟内，我注意到如果您拖动句柄超过一次，它将从错误的位置开始。您需要在拖动之前存储初始位置，并在开始或停止事件（或其他地方）中将其重置回来。 - NemoStein

你可能需要一些静态的原始位置，在可拖动事件中不被检测到。因为，如果你在移动正方形后松开它，它将能够从那个点移动，而不是原始点。 - Abdul Ahmad

是的，我注意到了这个问题。如果红色正方形被移动，它会自动吸附到最近的端点或中心位置。然后，如果它成功吸附，我们可以让它运行另一段代码，使其只能朝一个方向移动，直到吸附到中心位置，然后将选项重置为原始状态。 - Madian Malfi

我花了很长时间才解决了它，如果我将“ui.originalPosition.top”和“ui.originalPosition.top”更改为处理程序的位置，即“200”和“150”，它就解决了问题 :) .. 谢谢你的帮助。 - Madian Malfi