Javascript jquery可拖动移动仅限于30度

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

我知道：

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

将在x轴上移动它，并且：

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

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

我想让这个菜单生效

---

事实上，这很容易
您所要做的就是控制元素在

拖动事件中的位置，一点三角法将为您完成艰苦的工作


编辑：

这是

这是你的电话号码



var-rad=Math.PI/180；
$（“#句柄”）.draggable(
{
拖动：函数（事件、ui）
{
var偏移=
{
x:ui.offset.left-ui.originalPosition.left，
y:ui.offset.top-ui.originalPosition.top
};
变量距离=Math.sqrt（offset.x*offset.x+offset.y*offset.y）；
距离=数学最小值（距离，150）；
var角；
如果（offset.y>0）{angle=90*rad；}//向下移动
else如果（offset.x<0）{angle=210*rad；}//向左移动
else{angle=330*rad；}//向右移动
ui.position.top=数学sin（角度）*距离+ui.originalPosition.top；
ui.position.left=数学cos（角度）*距离+ui.originalPosition.left；
}
});
body{margin:0；}
#处理
{
顶部：150px；
左：200px；
宽度：25px；
高度：25px；
背景色：红色；
}
#背景
{
位置：绝对位置；
顶部：150px；
左：200px；
}
#背景。底部，
#背景，左，
#背景，对
{
变换原点：左上角；
宽度：150px；
高度：1px；
背景颜色：蓝色；
}
#背景.底部{变换：旋转（90度）；}
#背景。左{变换：旋转（210度）；}
#背景.右{变换：旋转（330度）；}

我很想知道这是否可行，或者您是否需要一些自定义解决方案，正如图中所示，没有解决方案，所以我想我需要自定义解决方案，不确定您是否尝试过创建对角元素并将其设置为包含元素？我真蠢！，当然可以，让我试试。它确实可以，我把容器旋转了30度，它可以工作，但是它从容器中出来，然后回到里面，然后去边界它不是30度的剧烈运动，也不是一条直线：/谢谢，这是我要求的，我可以在3个方向上移动30度、150度和90度吗，我已经更新了一张我想要实现的图片，谢谢你的帮助。你的有趣菜单=D您可以检查
偏移量.x
和
偏移量.y
是否为正或负，以更改角度锁定。。。在发布新代码后，我将尝试更新我的fiddleSeconds。我注意到，如果多次拖动手柄，它将从错误的位置开始。您需要在拖动之前存储初始位置，并在“开始”或“停止”事件（或其他地方）中将其重置。您可能需要在可拖动事件中未检测到的某个静态原始位置。因为，如果你在移动正方形后放开它，它将能够从该点移动，而不是从原始点移动。我注意到了问题，如果红色乡绅被移动，它会捕捉到最近的一端或中心，然后，如果它捕捉到，我们让它运行另一个代码，它只能在一个方向上移动，直到它捕捉到中心，它将重置选项。。