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