jQuery UI - 如何計算可拖動的「Containment」的自定義值？ jsfiddle新增

我有一個小容器和一個大的可變大小的圖像（圖像是用戶提交的），它裏面的圖像是我想要拖動的。我使用jQuery UI的「可拖動」功能進行垂直拖動，效果很好，但我遇到的唯一問題是您可以將圖像拖動到足夠遠的位置，以便顯示其邊緣，並且您可以看到上面的空白區域或在容器下面。我希望它能夠工作，例如，當圖像的底部邊緣碰到容器的底部邊框時，您無法再將其拖動到底部。jQuery UI - 如何計算可拖動的「Containment」的自定義值？ jsfiddle新增

我試圖使用

{ containment:[x1, y1, x2, y2] }

選項，以使這項工作，進行大量的試驗和錯誤後，我可以計算出不同大小的圖像正確的價值觀，但我想不通取出圖像大小和遏制值之間的函數關係。任何人都可以幫助我，或者指出我的方向是正確的，關於圖像大小和遏制應該有什麼樣的關係？該容器的尺寸爲360x240。非常感謝。

JSfiddle：http://jsfiddle.net/Ey74c/我不希望容器內的任何空白區域顯示 - 即無法將圖像拖動到足夠遠的位置以使其發生。我嘗試設置遏制：「父母」，它不再滾動？

來源

2013-02-02 user1436111

你可以張貼一些的jsfiddle這表明你的問題？ –

當然，只是添加它。 – user1436111

你想裁剪像這樣的圖像嗎？：http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail – sdespont

爲了解決這個問題，你應該使用：{ containment:[x1, y1, x2, y2] }

$("#container img").draggable({ 
    containment: [(parseInt($("#myImage").width()) - parseInt($("#container").width())) * -1, 
        (parseInt($("#myImage").height()) - parseInt($("#container").height())) * -1, 0, 0] 
});

jsFiddle

x1 = - （IMG。 width - container.width）

y1 = - （img.height - container.height）

x2 = 0

y2 = 0

來源

2013-02-02 23:39:57

謝謝！不幸的是，雖然它適用於jsfiddle它不能在我的實際代碼中工作...時間做一些調試:) – user1436111

@ user1436111您歡迎。將答案標記爲已接受，或者如果有幫助，請將其解決。我強烈建議你確保你的元素有很好的選擇器。瀏覽器的開發人員工具可以非常有幫助。 –

添加id RO您的圖像，並使用containment這樣的：http://jsfiddle.net/Ey74c/2/

<div id="container"> 
    <img id="myImage" src="http://www.petfinder.com/wp-content/uploads/2012/11/99059361-choose-cat-litter-632x475.jpg" 
    /> 
</div> 

$("#container img").draggable({ 
    containment: [$('#myImage').width() * -1, $('#myImage').height() * -1, 0, 0] 
});

來源

2013-02-02 22:58:38 sdespont

這不適用於我 - 問題是您可以向上或向下拖動它，以便從容器中顯示空白空白。我想在它發生之前停止拖動。 – user1436111

jQuery UI - 如何計算可拖動的「Containment」的自定義值？ jsfiddle新增

回答

相關問題