摘要：html组件实现可拖动效果
不知道大家进163的邮件有没有发现上面的邮件是可以拖动的，本想看看它的原码是如果实现，但由于本人水平太次，不能找到其中的原码，后面通过网上找到一些代码，修改了些基本上能实现此种效果，html代码如下：
不知道大家进163的邮件有没有发现上面的邮件是可以拖动的，本想看看它的原码是如果实现，但由于本人水平太次，不能找到其中的原码，后面通过网上找到一些代码，修改了些基本上能实现此种效果，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">尊敬的领导：<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>
<!--
.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">尊敬的领导：<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>
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/134308/viewspace-140583/ ，如需转载，请注明出处，否则将追究法律责任。
下一篇：
oracle中的null问题
请登录后发表评论
登录
全部评论
