随鼠标移动的效果

<div id="DIV1" style="position:relative; width:500px;">
  <div id="DIV2" style="position:absolute;width:30px; top:-10px; left:0px"></div>
</div>

现在要实现的效果是：当在DIV1内移动鼠标时候，DIV2随着鼠标的移动而移动，并得到DIV2距离DIV1左侧的距离，这个我已经实现了
 function rate(obj, oEvent) {
  var e = window.event;
   
  document.getElementById("DIV2").style.left = e.offsetX;
  }
但如果鼠标移动到DIV2内时候，DIV2就跑到了DIV1的左边去了，怎样才能鼠标移动到DIV2上面也能正常移动
下面是效果图

把你全部的代码，都贴出来。

lz，你改下写rate函数，将e.offsetX换成e.clientX就可以了。
备注：
  event.offsetX 解释为相对于触发事件的对象，鼠标的水平坐标；
  event.clientX 解释为鼠标在窗口客户区域的水平坐标。

clientX不行的，是按照窗口的，我要按照父DIV来