JS实现简单拖拽

目前的html代码可以直接运行，但是却不能实现拖拽。高手们帮忙看下，老板今天就要，在线等待。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>YIDATEC</title>
<style type="text/css"> 
<!--
#footer {
    width:800px;
    height:700px;
    border: 3px solid #ccc;        
    background-position: 0px 0px;
    cursor: move;
    overflow:auto;
}
#image {
    background-position: 0px 0px;
    background-repeat: no-repeat;
    cursor: move;
}
-->
</style>

<SCRIPT language=JavaScript type=text/JavaScript> function img_zoom(e, o) 
{
  var zoom = parseInt(o.style.zoom, 10) || 100;
  zoom += event.wheelDelta / 12;
  if (zoom > 0) o.style.zoom = zoom + '%';
  
  return false; 
}

function resizepic(o){
o.style.zoom='300%';
return true;
}

var p = new Array();
var speed = 0.05;  //
var picWidth = 3915;  //
var picHeight = 2978;
var x,y
var x_new,y_new
var haveclick = false;

function getmouseposition(event)
{
    if(document.all)
    {
        x = document.body.scrollLeft+event.clientX;
        y = document.body.scrollTop+event.clientY;
    }else
    {
        x = event.layerX;
        y = event.layerY;
    }   
    haveclick = true;
}

function movestop()
{
    haveclick = false;
}
 
function movestart(event)
{
if(haveclick)
{
    if(document.getElementById('image').style.backgroundPosition.length==0) {
     document.getElementById('image').style.backgroundPosition="0px 0px";
    }
    p = document.getElementById('image').style.backgroundPosition.split(" ")
 
    if(document.all)
    {    
        x_new = document.body.scrollLeft+event.clientX;
        y_new = document.body.scrollTop+event.clientY;
    }else
    {     
        x_new = event.layerX;
        y_new = event.layerY;    
    }
    
    x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);
    y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);
    
    if (x2<-picWidth+420) x2=-picWidth+420;
    if (y2>0) y2=0;
    if (x2>0) x2=0;
    if (y2<-picHeight+300) y2=-picHeight+300;
 
    document.getElementById('image').style.backgroundPosition=x2+"px "+y2+"px";
}
}



    </SCRIPT>
    </head>
<center>
<body>
<!-- Footer Divs -->
<div id="footer" >
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tbody>
  <tr>
<td align="center" >
   <br><br>
<img id="image" border="0" src="http://www.wallcoo.com/paint/romance_novel_paint_girls_17/images/sweet_beauty_on_romance_novel_cover_bi745.jpg" usemap="#sample" onload="resizepic(this)" onmousewheel="return img_zoom(event,this)" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"/>
                            <map name="sample">  
                            <a href="LandList.do?product_id=10000127&method=select" shape="poly"  coords="2021,1536,2026,1545,2023,1569,2049,1575,2050,1551,2045,1540">                            
                            <a href="LandList.do?product_id=10000129&method=select" shape="poly"  coords="1824,1503,1825,1519,1831,1538,1842,1559,1854,1579,1869,1596,1883,1603,1899,1609,1916,1617,1932,1630,1942,1644,1951,1657,1964,1669,1979,1622,1958,1614,1942,1605,1929,1590,1941,1576,1922,1551,1900,1550,1894,1533,1888,1516,1886,1511,1867,1503">
                            <a href="LandList.do?product_id=10000130&method=select" shape="poly"  coords="2044,1641,2029,1684,2046,1692,2057,1693,2066,1691,2077,1689,2085,1686,2099,1653">                           
                            <a href="LandList.do?product_id=10000128&method=select" shape="poly"  coords="2157,1613,2149,1647,2174,1649,2181,1629,2181,1620">
                            <a href="LandList.do?product_id=10000047&method=select" shape="poly"  coords="3115,1832,3119,1839,3132,1844,3141,1837,3168,1835,3167,1819,3133,1820,3132,1830,3124,1828">
                            <a href="LandList.do?product_id=10000126&method=select" shape="poly"  coords="3052,1808,3054,1827,3089,1825,3087,1806">
                            <a href="LandList.do?product_id=10000125&method=select" shape="poly"  coords="3176,1856,3183,1874,3221,1873,3220,1854">
                            
                        </map> 
</td>
  </tr>
</tbody>
</table>
</div></body>
</center>
</html>