帶有邊界的jQuery UI .position（）鼠標事件跟蹤

Question

我正在處理一個圖像庫，其中我想在相同的維度中顯示所有縮略圖，並且隱藏了任何溢出，但是onmouseover，用戶能夠看到通過在縮略圖父元素內移動鼠標，而圖像跟蹤其移動，縮略圖的隱藏部分。

jQuery用戶界面：

$('#targetElement').mousemove(function(event) { 
    $("#position img").position({ 
    my: "center", 
    of: event, 
    collision: "none" 
    }); 
}); 

CSS：

#targetElement { 
    width: 200px; 
    height: 150px; 
    border: 1px solid #333; 
    overflow: hidden; 
    margin: 50px auto; 
} 
.positionDiv { 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 
.positionDiv img { 
    min-height: 150px; 
    max-width: 200px; 
    position: absolute; 
    top: -50%; 
} 

HTML：

<div id="targetElement"> 
    <div class="positionDiv" id="position"><img src="http://er.pe/server/php/files/thumbnail/ill_09.jpg"></div> 
</div> 

請參閱JSFiddle我現在的進步。

我想要做的是設置垂直邊界，以便圖像的邊緣不能穿過其父元素的垂直邊界。

這可能嗎？

Answer 1

我不太明白你的意思是通過在圖像父元素的邊界內設置邊界，因爲你已經使用隱藏溢出，大部分圖像已經跨越邊界拖動..也許你可以澄清什麼你想要我。

但這裏是一個基本的例子，說明如何使用'jquery-ui-draggable`使圖像保持在邊界內。也許你可以修改它來完成你的設計。

下面是一個例子：

var right = 0; 
    var bottom = 0; 
    var top = 0; 
    var left = 0; 
    adjustment = 5; 
    $("img").draggable({ 
     start: function (event, ui) { 
      bottom = $(this).parent().parent().height(); 
      right = $(this).parent().parent().width(); 
     }, 
     drag: function(event, ui) { 
      if(ui.position.top <= top-adjustment) 
       ui.position.top = top-adjustment; 
      if(ui.position.left <= left-adjustment) 
       ui.position.left = left-adjustment; 
      console.log(ui.position.left); 
      if(ui.position.left+$(this).width() >= right+adjustment) 
       ui.position.left = right-$(this).width()+adjustment; 
      if(ui.position.top+$(this).height() >= bottom+adjustment) 
       ui.position.top = bottom-$(this).height()+adjustment; 
     } 
    }); 

http://jsfiddle.net/trevordowdle/B5f5M/

更新

http://jsfiddle.net/trevordowdle/DdMgP/4/