jQuery UI可拖曳約束

Question

我想要做的是在較小的div中包含一個較大的圖像，用戶可以在包含div內（很容易）拖動...類似於http://oneblackbear.com/draggable/index.html但我想阻止用戶將其拖拉到容器邊界以外。通過上面的例子，用戶可以將圖像完全拖到包含div的外面...我想阻止用戶將圖像拖出父div之外。

我試過使用jQuery UI可拖動，但問題是如果我使用約束選項，只要您將圖像鎖定到右下角並且不再可拖動，因爲子元素大於父約束。我不確定ui可拖動約束是否僅適用於較小的對象，然後是父容器。

有沒有人有任何想法如何處理？最好用jQuery Draggable？

Answer 1

var productHeadOffset = jQuery('#productHead').offset(); 
var productHeadHeight = jQuery('#productHead').height(); 
var productHeadWidth = jQuery('#productHead').width(); 
var productHeadImageHeight = jQuery('.productHeadImage').height(); 

var right = productHeadOffset.left; 
var bottom = productHeadOffset.top; 

var left = (img.width > productHeadWidth) ? (productHeadWidth + productHeadOffset.left) - img.width : 0; 
var top = (img.height > productHeadImageHeight) ? (productHeadHeight + productHeadOffset.left) - img.height : 0; 

jQuery('.productHeadImage').draggable({ containment: [left, top, right, bottom] }); 

Answer 2

這是爲我工作，但我仍然有在Chrome的問題時，頁面滾動的解決方案：

var cropBoundsOffset = $("cropBounds").offset(); 
var cropBoundsHeight = $("cropBounds").height(); 
var cropBoundsWidth = $("cropBounds").width(); 
var imageHeight = $("cropImage").height(); 
var imageWidth = $("cropImage").width(); 

var right = cropBoundsOffset.left; 
var bottom = cropBoundsOffset.top; 
var left = (imageWidth > cropBoundsWidth) ? (cropBoundsWidth + cropBoundsOffset.left) - imageWidth : 0; 
var top = (imageHeight > cropBoundsHeight) ? (cropBoundsHeight + cropBoundsOffset.top) - imageHeight : 0; 

var border_left = parseInt($("cropBounds").css("border-left-width")); 
var border_top = parseInt($("cropBounds").css("border-top-width")); 

$("cropImage").draggable("option", "containment", [ 
    left + border_left, 
    top + border_top, 
    right, 
    bottom 
]);