使对象在div换行的约束范围内移动？

Question

我试图在用户导航页面时按照用户鼠标制作图像。有人已经在论坛上讨论过这个问题。 Make an image follow mouse pointer。

问题是，我想限制图像的移动到它所在的div的大小限制。意思是，它跟随鼠标并继续跟随鼠标，但不超出它所在的div的边界。我试图摆弄上面提到的解决方案，但无济于事。你可以做到这一点

（提前道歉，如果这似乎是一个简单的问题，我还是新的编码。）

Answer 1

一种方法是检查鼠标的位置距离格边界，即如果x位置小于div的宽度减去图像的宽度（因为您不希望图像穿过div的边框），并且如果y位置小于div的高度减去图像的高度。 只有当div位于页面的右上角时，此功能才有效，因为我所做的检查是相对于此角（0 top，0 left）。如果div有边距（例如100px顶部，100px左边），那么您需要检查相对于div位置的上述条件，并且需要添加两个更类似的条件来检查鼠标指针是否跨越上边框和右边界。

此基础上，你跟着例如，对于这个代码是：

HTML

<div id="constraint"> 
    <img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG"/> 
</div> 

CSS

#image{ 
position:absolute; 
} 

#constraint { 
    height: 400px; 
    width: 500px; 
    border: 1px solid black; 
} 

JS

$(document).mousemove(function(e){ 
    var constraint = $('#constraint'); 
    var width = constraint.width(); // get the width of the div 
    var height = constraint.height(); // get the height of the div 

    var image = $("#image"); 

    if (e.pageX < width - image.width() && e.pageY < height - image.height()) 
     // if conditions are satisfied 
     image.css({left:e.pageX, top:e.pageY}); 
}); 

我时所做的DIV定位在角落基于例如，你跟着，你可以在这里看到在的jsfiddle一个例子：JSFiddle

我希望你得到了什么，我想主要的想法说明。