jquery - jQuery防止图像拖得太远

Question

我们在 div 中设置了一个图像overflow: hidden。我已将其设置为可拖动图像。

如果您尝试将图像拖得太远，它会停在边缘，我们怎么能得到它？

现在它会弹回原位，这会起作用，但并不是我们正在寻找的。

这是一个jsfiddle

Answer 1

根据http://jqueryui.com/demos/draggable/，您可以通过创建拖动器助手或设置内部 $(this).data('draggable').offset.click 来影响拖动。...不知道这是否是最好的解决方案，但通过在可拖动的内部添加它来测试它（在填充 yPos 之后）：

    if(yPos > 0)           
        $(this).data('draggable').offset.click.top += yPos;

这确实在尝试向下拖动时重置了位置（尽管有点生涩）。也应该适用于其他方向。（有些东西告诉我 jquery 拥有更好的属性来实现这一点）防止向右和向下拖动的示例：http: //jsfiddle.net/Ksd6n/6/

Answer 2

jQuery UI draggable 附带了一种约束移动的方法。 http://jqueryui.com/demos/draggable/#constrain-movement

它看起来像这样：

$( "#draggable4" ).draggable({ containment: "#demo-frame" });