带有边界的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/