jquery之用指针移动外部区域中的对象_编程设计

大家，我需要帮助，我从老师那里得到了一个任务，是关于 jquery 的，但是我发现了麻烦，也许你可以帮忙。案例研究如下所示。要点是，如果我将鼠标指针移动到蓝色框区域上，那么红色框区域中的对象就会跟随鼠标指针在蓝色框区域上的移动而移动。

说明文字:
1.白框、蓝框、红框是DIV。
2.红框和蓝框是白框内的绝对位置
3. 蓝色框中的蓝色圆圈代表鼠标指针被移动。
4. 黑圈表示当鼠标指针移动到蓝框内时会移动的物体，黑圈位置必须仍在红框内

以下是我到目前为止得到的结果。

    <!DOCTYPE html> 
<html> 
<head> 
  <style> 
  div.moved { position: relative; width:620px; height:620px; top: 10px; background:blue; border:2px groove; margin: 0 auto;} 
    div.tujuan { position: absolute; width:400px; height:400px; top: 0; left: 0; background:red; border:2px groove; } 
        div.korban { position: absolute; width:40px; height:40px; top: 0; left: 0; background:white; border:2px groove; } 
    div.sumber { position: absolute; width:200px; height:200px; bottom:0; right: 0; background:yellow; border:2px groove; cursor: pointer;} 
 
  p { margin:0; margin-left:10px; color:red; width:220px; 
      height:120px; padding-top:70px; 
      float:left; font-size:14px; } 
  span { display:block; } 
  </style> 
  <script src="jquery-latest.js"></script> 
</head> 
<body> 
  <p> 
    <span>Move the mouse over yellow box.</span> 
    <span>&nbsp;</span> 
  </p> 
 
    <div class="moved"> 
        <div class="sumber"></div> 
 
        <div class="tujuan"> 
            <div class="korban"></div> 
        </div> 
    </div> 
<script> 
    $("div.sumber").mousemove(function(e){ 
 
        var moveX = e.pageX-this.offsetLeft; 
        var moveY = e.pageY-this.offsetTop; 
        $("span:first").text(" LEFT : " + moveX + " , TOP : " + moveY); 
 
        var korban = $('div.korban').offset(); 
        var moveX2 = e.pageX - korban.left; 
        var moveY2 = e.pageX - korban.top; 
        $("span:last").text(" LEFT : " + moveX2 + " , TOP : " + moveY2); 
 
        $('div.korban').css({'margin-left' : moveX , 'margin-top' : moveY }) 
    }); 
</script> 
 
</body> 
</html>

请您参考如下方法:

这是你想要的吗？我稍微简化了你的代码

http://jsfiddle.net/P7PBx/8/

$("div.sumber").mousemove(function(e){ 
        var left = e.pageX - $(this).offset().left; 
        var top = e.pageY - $(this).offset().top;         
        $('span:first').text(left + ' ' + top); 
 
        top*=2; left*=2; 
        if(top > 360) top = 360; 
        if(left > 360) left = 360; 
        $('div.korban').css({ 
            'top':top, 
            'left':left 
        });            
});