可拖拽的文字与图片基于javascript完成

发布时间：2018-09-08 09:04:26 所属栏目：PHP教程来源：站长网

导读：可拖拽的文字与图片基于javascript完成文字与图片的拖动效果，也可以拖动链接，操作体验挺不错， Java Script代码实现，无jQeury，而且代码实现很简化，效果不错。 htmlheadtitle文字与图片被拖拽 - Liehuo.Net/titlestyle type=text/css*{padding:0;mar

　　文字与图片的拖动效果，也可以拖动链接，操作体验挺不错，JavaScript代码实现，无jQeury，而且代码实现很简化，效果不错。

<html> <head> <title>文字与图片被拖拽 - Liehuo.Net</title> <style type="text/css"> *{padding:0;margin:0;} .tips{position:absolute;background:#eee;} </style> </head> <body> <div class="tips" id="tips1" onmouseover="dragF.drag('tips1');"> <img src="/images/logo.gif">拖动图片</div> <div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="http://www.veryhuo.com" target="_blank">链接</a><br /> 拖动链接也可以 </div> </body> <script type="text/javascript"> var $id=function(id){return document.getElementById(id);} var dragF={ locked:false, lastObj:undefined, drag:function(obj){ $id(obj).onmousedown=function(e){ var e = e ? e : window.event; if(!window.event) {e.preventDefault();}/* 阻止标注浏览器下拖动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); var tempX=$id(obj).offsetLeft; var tempY=$id(obj).offsetTop; dragF.x=e.clientX; dragF.y=e.clientY; document.onmousemove=function(e){ var e = e ? e : window.event; if(dragF.locked==false) return false; $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> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

可拖拽的文字与图片 基于javascript完成

可拖拽的文字与图片基于javascript完成