最精简的JavaScript实现鼠标拖动效果的方法
相对于其它的鼠标拖动效果，这款拖动特效还是比较精简的，而且它还支持鼠标吸附，不按鼠标左键它也可以会跟随鼠标移动；定义时候也相对方便，只用指定被拖动的DIVID就可以了，扩展性很好。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标拖动</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scriptlanguage="JavaScript"type="text/javascript">
vardrag_=false
varD=newFunction('obj','returndocument.getElementById(obj);')
varoevent=newFunction('e','if(!e)e=window.event;returne')
functionMove_obj(obj){
varx,y;
D(obj).onmousedown=function(e){
drag_=true;
with(this){
style.position="absolute";
vartemp1=offsetLeft;
vartemp2=offsetTop;
x=oevent(e).clientX;y=oevent(e).clientY;
document.onmousemove=function(e){
if(!drag_)returnfalse;
with(this){
style.left=temp1+oevent(e).clientX-x+"px";
style.top=temp2+oevent(e).clientY-y+"px";
}
}
}
document.onmouseup=newFunction("drag_=false");
}
}
</script>
<body>
<divid="drag"style="background-color:#0066CC;width:280px;
height:160px;padding:20px;border:1px#003399solid;
font-size:10.5pt;color:white"onmouseover='Move_obj("drag")'>
<p>这个层是可以拖动的，而且还可以吸附鼠标，试试看！</p>
<p>/</p>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
热门推荐
10 五一公司放假祝福语简短
11 追星女孩的祝福语简短
12 给长辈端午祝福语 简短
13 生日祝福语有诗意简短
14 团圆日祝福语简短
15 中秋商务祝福语简短最新
16 温暖文艺简短祝福语短句
17 男孩上学祝福语简短的
18 入住酒店文案祝福语简短