jQuery UI Constelación arrastrable

Question

lo que intento hacer es tener una imagen grande contenida en un div más pequeño que el usuario pueda arrastrar dentro del div que contiene (bastante fácil) ... similar a http://oneblackbear.com/draggable/index.html pero quiero evitar que los usuarios arrastrándolo más allá del límite del contenedor. Con el ejemplo anterior, el usuario puede arrastrar la imagen completamente fuera del div que contiene ... Quiero evitar que el usuario arrastre la imagen fuera del div principal.

He intentado utilizar jQuery UI arrastrable pero el problema es si utilizo la opción de restricción tan pronto como arrastra la imagen que bloquea hacia abajo a la derecha y ya no se puede arrastrar porque el elemento hijo es más grande que la restricción principal. No estoy seguro de si la restricción ui draggable solo está pensada para objetos más pequeños que el contenedor primario.

¿Alguien tiene alguna idea de cómo hacerlo? preferiblemente con 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

Esta es la solución que funcionó para mí, aunque yo todavía estoy teniendo problemas en Chrome cuando se desplaza la página:

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