在垂直內容中可拖動的圖像

Question

我正在嘗試使用邊界創建圖像可拖動的效果。嗯，我有一個固定寬度的圖像，但高度可變。我有下一個代碼：

<div class="image_holder"> 
    <div class="image_content"></div> 
</div> 

好，「image_holder」設置用作掩模的圖像的可見區域，以其寬度= 180像素，高90像素=和溢流=隱藏屬性中設置。

當我將圖像加載到「image_content」中時，通常情況下，高度較高但被遮罩，只能看到「image_holder」區域。

問題是，當我使用jQuery可拖動函數，它的工作正常，但我需要設置邊界。我用下面的代碼：

$("#draggable").draggable({axis: 'y', containment: [0, $('.image_holder').offset().top-excess, 180, $('.image_holder').offset().top+90+excess], cursor: "crosshair"}); 

「過剩」是從一個計算：

var excess = $('#draggable').height() - 90; 

我的問題是，我不能夠正確地圈定遏制區域拖動圖像無圖像離開可見區域。

任何幫助，將不勝感激。

Answer 1

如果我理解正確;你可以通過監測拖動事件如下做到這一點：

$('img').draggable({ 
    axis: 'y', 
    drag: function(event, ui) { 
     var pos = ui.position; 
     var $this = $(this); 

     if((pos.top * -1) >= ($this.height() - $this.parent().height())) 
     { 
      return false; 
     } 

     if(pos.top > 0) 
     { 
      return false; 
     } 
    } 
}); 

基本上，如果圖像是大約到容器的邊界之外去只是返回false

DRAG DEMO