jQuery UI Draggable Constraint

Question

내가하려고하는 것은 사용자가 포함 된 div 내에서 드래그 할 수있는 작은 div 내에 포함 된 큰 이미지를 가져 오는 것입니다. (비슷한 정도) ... http://oneblackbear.com/draggable/index.html와 유사하지만 사용자를 차단하고 싶습니다. 컨테이너 경계를 넘어서 드래그합니다. 위 예제에서 사용자는 포함 된 div 외부에서 이미지를 완전히 드래그 할 수 있습니다 ... 사용자가 부모 div 외부에서 이미지를 드래그하지 못하도록하고 싶습니다.

jQuery UI draggable을 사용해 보았습니다. 그러나 이미지를 드래그하자 마자 구속 조건 옵션을 사용하면 하위 요소가 상위 제약 조건보다 크기 때문에 더 이상 드래그 할 수 없습니다. draggable 제약 조건이 부모 컨테이너보다 작은 객체에만 적용되는지 확실하지 않습니다.

아무도 아이디어가 있습니까? 바람직하게는 jQuery Draggable? 이것은 나를 위해 일한

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

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

이

페이지를 스크롤 할 때 나는 아직도 크롬에서 문제가 있어요하지만, 나를 위해 일한 솔루션입니다. productHead는 포함 div이고 productHeadImage는 배경 이미지가 드래그되는 이미지로 설정된 div입니다.