jQuery UI可拖動的收容區域隨着屏幕大小的變化而變化

我有一個較大的圖像被保存在一個較小的div內。 div應用position:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden，因此只有部分圖像可見。 div位於另一個div中，屏幕的中心位於屏幕的中心width:1000px; margin:0 auto; position:relative;jQuery UI可拖動的收容區域隨着屏幕大小的變化而變化

我已將$('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]});應用於圖像，這意味着它可以在div上拖動，但圖像的外邊緣永遠不會超出外部div的邊緣。（即圖像的左邊緣不能拖到div的左邊緣之外，右邊緣，上邊緣和下邊緣也是如此）。因此圖像總是完全填滿div;沒有背景可見。

這很好，當我的瀏覽器最大化，但改變時，它不是 - 我假設包含X和Y值是從瀏覽器窗口計算，而不是父div。有什麼辦法可以強制它從div計算？（將包含設置爲'父'）不起作用，因爲它允許將圖像拖到視線之外（即，現在可以將圖像的每個邊緣拖到div的相對邊緣）

來源

2012-05-18 Dorian Fabre

任何機會，你！可以在jsfiddle.net上進行演示，這樣可以更輕鬆地玩弄並親自看到問題了嗎？您可以使用lorempixel.com中任何大小的佔位符圖像，幷包含jquery ui css和呃資源 – xec

我在[jsfiddle]（http://jsfiddle.net/dorianfabre/2EZ4A/）上創建了一個演示，使用我網站上的可拖動圖像。如果將屏幕面板設置爲使得結果面板爲寬度的一半並且剛好超過1600x1200顯示器的高度的一半，則圖像在div內完全滾動。但是，如果更改小提琴面板（或瀏覽器窗口）的大小，圖像將不會一直滾動到邊緣，也不會過分，顯示背景爲白色。有任何想法嗎？ –

我有同樣的問題，這裏是我如何解決它：

var windowX = $(window).width(); //determines the width of the browser window 
var windowY = $(window).height();//determines the height of the browser window 
var imageX = 2000; //put the width of your image here. my image was 2000x1000 
var imageY = 1000;//image height 
$("#theImage").draggable({ containment: [(windowX - imageX),(windowY - imageY),0,0] });

的最後一行包含左上角和瀏覽器的寬度/高度之間的圖像希望這有助於

來源

2014-11-20 20:03:43

jQuery UI可拖動的收容區域隨着屏幕大小的變化而變化

回答

相關問題