jquery 只能拖动 30 度
jquery draggable moves on 30 degrees only
我想要一个在 30 度角的条上移动的选择器,我在网上做了一些研究,但我找不到任何解决方案!。
我知道:
$( ".selector" ).draggable({ axis: 'x' });
将在 x 轴上移动它并且:
$( ".selector" ).draggable({ axis: 'y' });
将在 y 轴上移动它,但问题是如何仅在 30 度角上移动它?
我想让这个菜单起作用。
其实很简单!
您所要做的就是控制您的元素在 drag
事件中的位置,一点三角学将为您完成艰苦的工作...
已编辑:
这是 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>
我想要一个在 30 度角的条上移动的选择器,我在网上做了一些研究,但我找不到任何解决方案!。
我知道:
$( ".selector" ).draggable({ axis: 'x' });
将在 x 轴上移动它并且:
$( ".selector" ).draggable({ axis: 'y' });
将在 y 轴上移动它,但问题是如何仅在 30 度角上移动它?
我想让这个菜单起作用。
其实很简单!
您所要做的就是控制您的元素在 drag
事件中的位置,一点三角学将为您完成艰苦的工作...
已编辑:
这是 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>