如何实现在页面上对一个button对象的拖动

<HTML>
<HEAD>
<TITLE>THE EXAMPLE</TITLE>
<style>
.drag{position:relative;cursor:hand}
</style>
<script language="JavaScript">
var dragapproved=false
var eventsource,x,y
function move()
 {
  if (event.button==1&&dragapproved) 
   {
    eventsource.style.pixelLeft=temp1+event.clientX-x
    eventsource.style.pixelTop=temp2+event.clientY-y
    return false
   }
 }
function drags()
 {
  if (!document.all)
  return
  if (event.srcElement.className=="drag")
   {
    dragapproved=true
    eventsource=event.srcElement
    temp1=eventsource.style.pixelLeft
    temp2=eventsource.style.pixelTop
    x=event.clientX
    y=event.clientY
    document.onmousemove=move
   }
 }
document.onmousedown=drags   
document.onmouseup=new Function("dragapproved=false")
</script>
</HEAD>
<BODY>
<span style="font-family:DextorOutD;font-size: 9pt">
<input type=button value=drag class=drag>
</span>
自由的按钮
</BODY>
</HTMl>