摘要:html組件實現(xiàn)可拖動效果
不知道大家進163的郵件有沒有發(fā)現(xiàn)上面的郵件是可以拖動的,本想看看它的原碼是如果實現(xiàn),但由于本人水平太次,不能找到其中的原碼,后面通過網(wǎng)上找到一些代碼,修改了些基本上能實現(xiàn)此種效果,html代碼如下:
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</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">尊敬的領(lǐng)導(dǎo):<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>