文字与图片的拖拽代码,JS代码库,德仔网

代码语言

代码分类

【JS】文字与图片的拖拽

作者:泳臻 / 发布于2015/11/12/ 522


	<html>
	<head>
	<title>JavaScript实现文字与图片的拖拽效果</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/skinslogo.gif">图片可以拖动</div>
	<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="http://www.7caidy.com" target="_blank">七彩影视</a>拖动链接也可以
	</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 href='http://www.daimajiayuan.com/sitejs-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);
	 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>

	<hr> 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：网页代码站</font>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　文字　　图片　　拖拽　

同语言下

可能有用的

泳臻贡献的其它代码(24)