div容器中的图片拖动 俺的创作

<div id="div1" style="overflow:hidden; cursor:move; background-color:#CCCCCC; width:90%; height:90%;">
 <img src="Winter.jpg" style="position:absolute; left:0px; top:0px;" onmousemove="return false;">
</div>

<script type="text/javascript" src="prototype.js"></script>

<script type="text/javascript" defer="defer">
function Point(x,y){
    this.x=x;
    this.y=y;
    return this;
}
function getMouseXY(e){
 return new Point(Event.pointerX(e),Event.pointerY(e));
}
var dragStartPoint=null;
var dragStartLeft=null;
var dragStartTop=null;
var mapLayer = $("div1");
function dragStart(){
    Event.observe(mapLayer, "mousedown", setStartVar, false);
    Event.observe(document, "mousemove", movingMap, false);
    Event.observe(document, "mouseup", dargClear, false);
}
dragStart();
function setStartVar(){
    dragStartPoint = getMouseXY(window.event);
    with(mapLayer.firstChild){
        dragStartLeft = style.pixelLeft;
        dragStartTop = style.pixelTop;
    }
}
function movingMap(){    
    if(dragStartPoint==null&&dragStartLeft==null&&dragStartTop==null)
        return;
    var mousePoint = getMouseXY(window.event);
    with(mapLayer.firstChild){
        style.left = dragStartLeft + (mousePoint.x - dragStartPoint.x) + "px";
        style.top = dragStartTop + (mousePoint.y - dragStartPoint.y) + "px";
    }
}
function dargClear(){
     dragStartPoint=null;
  dragStartLeft=null;
  dragStartTop=null;
}
function dargEnd(){
    dargClear();
    Event.stopObserving(mapLayer, "mousedown", setStartVar, false);
    Event.stopObserving(document, "mousemove", movingMap, false);
    Event.stopObserving(document, "mouseup", dargClear, false);
}
</script>