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>