piliskys

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  25 随笔 :: 0 文章 :: 40 评论 :: 0 Trackbacks
摘要: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>
&nbsp;&nbsp;&nbsp;&nbsp;您好!<br>
 
<br>
&nbsp;&nbsp;此致<br>
敬礼 ! 
<br>
&nbsp;&nbsp;&nbsp;&nbsp; 自荐人: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>
 
posted on 2005-12-14 10:26 霹雳火 阅读(2909) 评论(6)  编辑  收藏

评论

# re: css和javascript实现拖动效果 2005-12-14 12:33 hanny0918
这样做可用于什么上呢?  回复  更多评论
  

# re: css和javascript实现拖动效果 2005-12-14 13:17 霹雳火
163邮件上是用于拖到相应的文件夹下,这是一个功能,也可算是增加页面的效果吧,  回复  更多评论
  

# re: css和javascript实现拖动效果 2005-12-15 12:36 kris_wang
http://www.itpub.net/463545.html

你有颜色选择器的东西吗,比如dreamweaver中的颜色选取的

javascript的也行  回复  更多评论
  

# re: css和javascript实现拖动效果 2006-03-01 09:54 老牛
很不错,多谢分享。  回复  更多评论
  

# re: css和javascript实现拖动效果 2007-06-10 09:58 calmzeal
哥们
刚好要弄一个类似功能
于是拿你的代码改了改 呵呵
增加了拖动时以div显示选中信息(具体信息还没写 。。)
还有接收对象 使用class=dragto表示能接收拖动




<style type="text/css">
<!--
.drag{position:relative;cursor:hand}
-->
</style>

<script type="text/javascript">
<!--
var dragapproved=false
var z,x,y
var xx,yy

function move(){
if ( z==null){ ; return}
if (event.button==1&&dragapproved){
z.style.pixelLeft=event.clientX
z.style.pixelTop=event.clientY

if (event.srcElement.className=="dragto"){
z.innerText="aaa";
}
//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
z=document.all("drag1");
z.style.pixelLeft=event.clientX;
z.style.pixelTop=event.clientY;

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
if (event.srcElement.className=="dragto"){
alert('移动完毕!');
}
else moveto()
}

}
document.onmousedown=drags
document.onmouseup=drags1

Function("dragapproved=false")
//-->
</script>

<html>
<body>

<table>
<tr>
<td class="dragto">1111111111</td>
</tr>
<tr>
<td class="dragto">222222222</td>
</tr>
</table>
<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>
&nbsp;&nbsp;&nbsp;&nbsp;您好!<br>
<br>
&nbsp;&nbsp;此致<br>
敬礼 !
<br>
&nbsp;&nbsp;&nbsp;&nbsp; 自荐人: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>
<div id="drag1" class="drag" style="position:absolute"><div>?</div>拖动中。。。。</div>
</body>
</html>
  回复  更多评论
  

# re: css和javascript实现拖动效果 2008-07-09 14:49 小头猎豹
不明白你们写的这个是干什么用的  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: