元素的拖动效果

元素的拖动效果
作者：Neoxone 发表时间： 2010年05月13号，星期四阅读：4,310 次

先看一下普通的拖动元素的代码

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:100px;height:100px;}
</style>
</head>
<body>
<div class="tips" onmousedown="drag(this,event);">
	拖动框
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		o.style.left=tX+(e.clientX-dx)+"px";
		o.style.top=tY+(e.clientY-dy)+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

非常简单。

考虑一下边境问题：

<!doctype html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:100px;height:100px;}
</style>
</head>
<body style="">
<div class="tips" onmousedown="drag(this,event);">
	拖动框
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	var largeL = document.documentElement.offsetWidth -  o.offsetWidth,
		largeT = Math.max(document.documentElement.clientHeight,document.body.offsetHeight) - o.offsetHeight;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		var oX = tX + (e.clientX - dx),
			oY = tY + (e.clientY - dy);
			(function(){
			/* 考虑边境 */
				if(oX > largeL || oX < 0){
					oX = (oX < 0) ? 0 : largeL
				}
				if(oY > largeT || oY < 0){
					oY = (oY < 0) ? 0 : largeT
				}
			})();
			o.style.left = oX + "px";
			o.style.top = oY + "px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

如果拖动层内有元素不允许拖动。可以绑定一个事件，阻止拖动处理函数的执行。

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>简单拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
html,body{height:100%;overflow:hidden;}
.tips{position:absolute;background:#eee;width:180px;height:200px;}
textarea{font-size:12px;}
</style>
</head>
<body>
<div class="tips" onmousedown="drag(this,event);">
	<textarea cols='25' rows='5' onmousedown="(document.all)?(event.cancelBubble = true) : (event.stopPropagation())">阻止拖动区域（ie,ff支持cancelBubble; ie除外，都支持标准stopPropagation()）</textarea>
	可以拖动区域
</div>
</body>
<script type="text/javascript">
var drag=function(o,e){
	var e = e ? e : window.event;
	var tX=o.offsetLeft,
		tY=o.offsetTop,
		dx=e.clientX,
		dy=e.clientY;
	document.onmousemove=function(e){
		var e = e ? e : window.event;
		o.style.left=tX+(e.clientX-dx)+"px";
		o.style.top=tY+(e.clientY-dy)+"px";
	}
	document.onmouseup=function(){
		document.onmousemove=null;
		document.onmouseup=null;
	}
}
</script>
</html>

图片的drag&drop需要注意浏览器中在拖动图片时候会有默认动作的，拖动带链接的内容也是。所以拖动这些内容时应阻止其事件，另外加入setCapture。（下面拖动代码略有差别）

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>拖曳</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($id('tips1'));">
	<img src="http://www.baidu.com/img/bd_logo1.png">
</div>
<div class="tips" id="tips2" onmouseover="dragF.drag($id('tips2'));">
	<a href="http://www.cssass.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){
		obj.onmousedown=function(e){
			var e = e ? e : window.event;
			if(!window.event) {e.preventDefault();}		/* 阻止标注浏览器下拖动a,img的默认事件 */
			if(obj.setCapture){
				 obj.setCapture();
			}else if(window.captureEvents){
				window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
			}
			dragF.locked=true;
		  	obj.style.position="absolute";
			obj.style.zIndex="100";
			if (dragF.lastObj&&dragF.lastObj!=obj) {		 /* 多元素拖动时候需要恢复上一次元素的状态 */
				dragF.lastObj.style.zIndex = "1";
			}
			dragF.lastObj=obj;
			var tempX=obj.offsetLeft;
			var tempY=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;
				obj.style.left=tempX+(e.clientX-dragF.x)+"px";
				obj.style.top=tempY+(e.clientY-dragF.y)+"px";
				if(window.event) {e.returnValue=false;}		/* 阻止ie下a,img的默认事件 */
			}
			document.onmouseup=function(){
				dragF.locked=false;
				document.onmousemove=null;
				document.onmouseup=null;
				if(obj.releaseCapture){
					obj.releaseCapture();
				}else if(window.captureEvents){
					window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
				}
			}
		}
	}
}
</script>
</html>

标签： drag&drop, 拖动层, 拖拽, 阻止冒泡, 默认事件