jQuery防止圖像過度拖動

Question

我們有一個div內的圖像設置爲overflow: hidden。我已將它設置爲可拖動圖像。

我們怎樣才能得到它，所以如果你試圖拖動圖像太多，它停在邊緣？

現在它可以恢復到可以工作的位置，但不是我們正在尋找的。

這裏有一個jsfiddle

Answer 1

jQuery UI的可拖動附帶了限制運動的方法。 http://jqueryui.com/demos/draggable/#constrain-movement

它看起來是這樣的：

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

Answer 2

據http://jqueryui.com/demos/draggable/，你可以通過創建一個牽引輔助，或通過設置內部$（本）。數據（「拖動」影響拖動）.offset.click。 ... 不知道這是最好的解決方案，但通過加入這裏面拖動（yPos充滿後）進行了測試：

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

這確實重置試圖拖垮時的位置（雖然有點生澀）。還應該爲其他方向工作。 （和東西告訴我，jQuery擁有更好的屬性來實現這一點） 阻止向右和向下拖動的示例：http://jsfiddle.net/Ksd6n/6/