Jquery 可拖放收容半径

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

我有一个 fiddle 来显示此行为

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 可拖放收容半径

Jquery Dragabale containment radius

jquery

jquery-ui-draggable