jquery draggable仅在30度上移动

Question

我希望有一个选择器在30度角的条形图上移动，我在网上做了一些研究，但我找不到任何解决方案！

我知道：

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

将在x轴上移动它：

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

会在y轴上移动它，但问题是如何仅以30度角移动它？

我想让这个菜单有用。

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; } });事件中控制元素的位置，并且一些三角函数将为您付出辛勤的努力......

<强>编辑：
这是original answer
这是new one

＆＃13;

＆＃13;

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); }

＆＃13;

<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>

＆＃13;

Name      Amount   Time

Person 1    1      Time
Person 2    1      Time
Person 3    1      Time
Person 1    1      Time
Person 2    1      Time
Person 3    1      Time
Person 1    1      Time

＆＃13;

＆＃13;

＆＃13;