js源码--简单的div拖动

< html >
< head >

< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 " ></ head >
< BODY style = " margin:0;padding:0; " >  
< div id = " dMsgBody "  style = " border:1px solid;position:absolute  " >
< div id = " dTitle "  style = " background-color:#CCCCCC  " > 这是标题,拖动这里可以实现拖动效果 </ div >
< div id = " dTxtBody " > 这是正文,拖动这里不可以实现拖协效果 </ div >
</ div >
</ body >
< script language = " javascript " >
var 
object ;
window.onload 
=  startUp(document.getElementById( " dMsgBody " ));
function startUp(obj)......
{
obj.onmousemove 
=  mousemove;
obj.onmousedown 
=  mousedown;
obj.onmouseup 
=  mouseup;
}


function mousemove()......
{
if ( object != null )...... {
object .style.pixelTop  =   event .clientY  - object.objY;
object .style.pixelLeft  =   event .clientX  - object.objX;
}

}


function mousedown(
event ,obj)...... {
obj
= obj || this ;
event = event || window. event ;
obj.setCapture();
object = obj;
// objX = event.offsetX;
// objY = event.offsetY;
obj. objX  =   event .clientX - obj.style.pixelLeft;
obj. objY  =   event .clientY - obj.style.pixelTop;
// alert(obj.offsetTop+"   "+obj.style.pixelTop) offset是和body标签的距离,所以会有空隙才能等效,所以在body上加了css
}


function mouseup()......
{
if ( object != null )...... {
    
object .releaseCapture();
    
object = null   
}

}

</ script >
</ html >  

自己写了个,这个应该是比较简单通用的

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值