可拖拽的笔墨与图片基于javascript完成

发布时间：2018-08-21 08:33:35 所属栏目：编程来源：站长网

导读：可拖拽的笔墨与图片基于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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys

可拖拽的笔墨与图片 基于javascript完成

可拖拽的笔墨与图片基于javascript完成