jQuery UI可拖动约束

Question

我想要做的是在一个较小的div中包含一个大图像,用户可以在包含div内拖动(很容易)...类似于http://oneblackbear.com/draggable/index.html但是我想要阻止用户将其拖动到容器边界之外.使用上面的示例,用户可以将图像完全拖动到包含div之外...我想防止用户将图像拖动到父div之外.

我已经尝试过使用jQuery UI draggable,但问题是如果我拖动它锁定到右下角的图像并且不再可拖动因为子元素大于父约束,我就会使用约束选项.我不确定ui draggable约束是否仅用于较小的对象,而不是父容器.

有没有人有任何想法怎么办？最好用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] });