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 
]);