我想要一个选择器,在一个30度的角度上移动,我在网上做了一些研究,但是我找不到任何解决方案!
我知道:
$( ".selector" ).draggable({ axis: 'x' });
将其沿着x轴移动:
$( ".selector" ).draggable({ axis: 'y' });
将其在y轴上移动,但问题是如何只将其移动30度角?
我想让这个菜单工作。
我想要一个选择器,在一个30度的角度上移动,我在网上做了一些研究,但是我找不到任何解决方案!
我知道:
$( ".selector" ).draggable({ axis: 'x' });
将其沿着x轴移动:
$( ".selector" ).draggable({ axis: 'y' });
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>
offset.x
和 offset.y
是否为正数或负数来改变角度锁定... 我会尝试更新我的 fiddle。 - NemoStein