css和javascript实现拖动效果

所属类别：XHTML
文章作者：piliskys
推荐指数：★★★☆
文档人气：163
本周人气：3
发布日期：2007-4-12

不知道大家进163的邮件有没有发现上面的邮件是可以拖动的，本想看看它的原码是如果实现，但由于本人水平太次，不能找到其中的原码，后面通过网上找到一些代码，修改了些基本上能实现此种效果，html代码如下：
<style>

</style>
<script >
<!--
var dragapproved=false
var z,x,y
var xx,yy

function move(){
if ( z==null){ ; return}
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function moveto(){
z.style.pixelLeft= xx
z.style.pixelTop= yy
z=null
}

function drags(){

if (!document.all)return
if (event.srcElement.className=="drag"){

dragapproved=true
z=event.srcElement
if ( z==null){ return}
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
xx=z.style.pixelLeft
yy=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move

}

}

function drags1(){
if ( z==null){ ; return}
if (z.className=="drag"){
//z=event.srcElement
//alert(z.type);
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
moveto()
}

}
document.onmousedown=drags
document.onmouseup=drags1

Function("dragapproved=false")
//-->
</script>
<html>
<body>
<table CELLPADDING=0 CELLSPACING=0 width="630" align="center">
<tr>
     <td align="center" colspan="9" height="60">
<table bgcolor="blue" CELLPADDING=1 CELLSPACING=1 width="200" height="23" align="center" border=1>
<tr>
     <td align="center" colspan="9" height="60">
       <font class="title1">自荐信</font>
     </td>
</tr>
     <tr>
     <td colspan="9" class="drag" height="27">尊敬的领导：<br>
    您好！<br>
<br>
  此致<br>
敬礼！ <br>
     自荐人：piliskys <br>

     </td>
</tr>
<tr><td align="center">
<input type=button class="drag"   value=写邮件 style=width:78 />
</td></tr>
<tr >
                  <td class="drag">
                    姓
                    名：
                  </td>

                </tr>
</table>
</td>
</tr>
</table>
</body>
</html>