JavaScript实现文字与图片拖拽效果的方法
本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>JavaScript实现文字与图片的拖拽效果</title> <styletype="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style> </head> <body> <divclass="tips"id="tips1"onmouseover="dragF.drag('tips1');"> <imgsrc="/images/skinslogo.gif"><br>图片可以拖动</div> <divclass="tips"id="tips2"onmouseover="dragF.drag('tips2');"><ahref="https://www.nhooo.com"target="_blank">毛票票</a><br/>拖动链接也可以 </div> </body> <scripttype="text/javascript"> var$id=function(id){returndocument.getElementById(id);} vardragF={ locked:false, lastObj:undefined, drag:function(obj){ $id(obj).onmousedown=function(e){ vare=e?e:window.event; if(!window.event){e.preventDefault();}/*阻止标注<ahref='/site/js-5791-1.html'target='_blank'><u>浏览器</u></a>下拖动a,img的默认事件*/ dragF.locked=true; $id(obj).style.position="absolute"; $id(obj).style.zIndex="100"; if(dragF.lastObj&&dragF.lastObj!=$id(obj)){/*多元素拖动需要恢复上次元素状态*/ dragF.lastObj.style.zIndex="1"; } dragF.lastObj=$id(obj); vartempX=$id(obj).offsetLeft; vartempY=$id(obj).offsetTop; dragF.x=e.clientX; dragF.y=e.clientY; document.onmousemove=function(e){ vare=e?e:window.event; if(dragF.locked==false)returnfalse; $id(obj).style.left=tempX+e.clientX-dragF.x+"px"; $id(obj).style.top=tempY+e.clientY-dragF.y+"px"; if(window.event){e.returnValue=false;}/*阻止ie下a,img的默认事件*/ } document.onmouseup=function(){ dragF.locked=false; } } } } </script> </html>
希望本文所述对大家的javascript程序设计有所帮助。