jQuery防止图像拖得太远

Question

div中的图像设置为overflow: hidden。我设置它以便图像可拖动。

如果你试图将图像拖得太远而在边缘处停止，我们怎么能得到呢？

现在它会重新回到可以工作的地方，但这并不是我们想要的。

这是jsfiddle

Answer 1

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

它看起来像这样：

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

Answer 2

根据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/