jQuery UI Draggable Constraint

Question

я пытаюсь создать большое изображение, содержащееся в меньшем элементе div, который пользователь может перетаскивать внутри содержащего элемента div (достаточно просто) ... похоже на http://oneblackbear.com/draggable/index.html, но я хочу запретить пользователямот перетаскивания его дальше, чем граница контейнера.В приведенном выше примере пользователь может перетащить изображение полностью за пределы содержащего div ... Я хочу, чтобы пользователь вообще не перетаскивал изображение за пределы родительского div.

Я пытался использовать пользовательский интерфейс jQueryперетаскиваемый, но проблема в том, что если я использую параметр ограничения, как только вы перетаскиваете изображение, оно блокируется внизу справа и больше не перетаскивается, потому что дочерний элемент больше родительского ограничения.Я не уверен, что перетаскиваемое ограничение пользовательского интерфейса предназначено только для более мелких объектов, чем родительский контейнер.

У кого-нибудь есть идеи, как это сделать?желательно с 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
]);