拖动 div 代码

<! doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >  
< html  xmlns ="http://www.w3.org/1999/xhtml"  lang ="gb2312" >  
< head >  
< title >  代码实例:拖动对象 Drag Object (兼容:IE、Firefox、Opera ... ) </ title >  
< meta  http-equiv ="content-type"  content ="text/html; charset=gb2312"   />  
< meta  name ="editor"  content ="枫岩,http://www.cnlei.com" >  
< meta  name ="keywords"  content ="代码实例:拖动对象" >  
< meta  name ="description"  content ="最简短的拖动对象代码实例演示" >  
< style >  
.dragAble 
{ position : relative ; cursor : move ; }  
</ style >  
< script  language ="javascript" >  
<!--  
//  Author: Unkonw 
//
 Modify: 枫岩@CnLei.com 
var  ie = document.all; 
var  nn6 = document.getElementById &&! document.all; 
// alert(nn6);
var  isdrag = false
var  y,x; 
var  oDragObj; 

function  moveMouse(e) { 
if  (isdrag) { 
oDragObj.style.top 
=  (nn6  ?  nTY  +  e.clientY  -  y : nTY  +  event.clientY  -  y) + " px "
oDragObj.style.left 
=  (nn6  ?  nTX  +  e.clientX  -  x : nTX  +  event.clientX  -  x) + " px "
return   false



function  initDrag(e) { 
var  oDragHandle  =  nn6  ?  e.target : event.srcElement; 
var  topElement  =   " body "
alert(oDragHandle.tagName);
while  (oDragHandle.tagName  !=  topElement  &&  oDragHandle.className  !=   " dragAble " ) { 
oDragHandle 
=  nn6  ?  oDragHandle.parentNode : oDragHandle.parentElement; 

if  (oDragHandle.className == " dragAble " ) { 
isdrag 
=   true
oDragObj 
=  oDragHandle; 
nTY 
=  parseInt(oDragObj.style.top + 0 ); 
=  nn6  ?  e.clientY : event.clientY; 
nTX 
=  parseInt(oDragObj.style.left + 0 ); 
=  nn6  ?  e.clientX : event.clientX; 
document.onmousemove
= moveMouse; 
return   false


document.onmousedown
= initDrag; 
document.onmouseup
= new  Function( " isdrag=false " ); 
// --> 
</ script >  
</ head >  
< body >  
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />  
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />  
< img  src ="http://www.iecn.net/images/user_icons/2006/10/01/u_35653.gif"  class ="dragAble"   />< br  />< br  />  
< div  style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;"  class ="dragAble" > 这些都是可拖动对象 </ div >  
< div  style ="border:1px solid #ff6d00;background:#ffd801;width:240px;padding:5px 0;"  class ="dragAble"  id ="aa" > 这些都是可拖动对象 </ div >
</ body >  
</ html >  
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值