Question

我试图模仿操纵杆的行为。您可以向任何方向推动操纵杆，但它可以推动您可以推动的距离，并且一旦松开操纵杆它就会恢复到原来的位置。我正在使用jquery可拖动。恢复位置很容易，我面临的问题是将操纵杆保持在圆圈内。

HTML：

<div class="demo">      

    <div id="draggable4" class="draggable draginvalid ui-widget-content">     
       drag me
    </div>  


</div>

JS：

$( ".draginvalid" ).draggable({ 
  distance: 1,
    revert: "invalid" 
});

我有一个小提示来表明这种行为

http://jsfiddle.net/mGWfP/12/

关于如何实现操纵杆包含在圆圈内的行为的任何想法？ TIA

Answer 1

这是一个开始的地方：

$( ".draginvalid" ).draggable({ 
  distance: 1,
  revert: "invalid",
  drag: function(e, d) {
    console.log(d);
    d.position.left = Math.max(-40, Math.min(40, d.position.left));
    d.position.top = Math.max(-40, Math.min(40, d.position.top));
  }
});

目前只允许每个方向变化40。它还没有完美地保持在圆圈中，但是使用正确的公式，你可以到达那里。

还可以在控制台中查看。我正在打印可以影响位置的对象。

希望这会有所帮助：）

编辑：这里是完美圆圈的代码。您只需稍微调整内圈的位置即可。它不完全在中间。此外，您可能需要更改数字44，这是您可以在每个方向上移动操纵杆的最大像素数。

$( ".draginvalid" ).draggable({ 
  distance: 1,
  revert: "invalid",
    drag: function(e, d) {
      maxMove = 44;
      maxMoveSqr = 44*44;
      l = d.position.left;
      t = d.position.top;
      len = l*l+t*t;
      if (maxMoveSqr < len) {
        d.position.left = l / Math.sqrt(len) * maxMove;
        d.position.top = t / Math.sqrt(len) * maxMove;      
      }
    }
});

随意优化;）

Jquery Dragabale收容半径

1 个答案: