对拖拽的高级应用，实现带框拖拽

本文将对我上篇JavaScript拖拽进行添加特效，实现类似windows7系统那样带框的拖拽。如果有疑问的话先看我上一篇文章JavaScript实现拖拽。本文主要细讲如下实现这特效的细节。

在JavaScript中我们要实现一个带框的拖拽的话，其实这个框本身也是一个div元素，而这个div元素是我们动态生成的。要想让这个框会动，首先我们对它的定位动手，在css中新设一个id，让position设为absolute。然后我们就在js中创造这个div元素，当鼠标进行点击的时候，这个通过document.createElement('div')来生成一个div元素，并且利用setAttribute或者直接用id给它赋予css样式。这个div框的长宽肯定要等于被点击对象的长宽，所以width和height要等于offsetWidth和offsetHeight，为了不让点击的时候div框突然间跑到页面左上角，我们要对它的top和left进行设置，让它的top和left等于被点击对象的offsetTop和offsetLeft，之后就appendChild加入到body中。

当鼠标移动的时候，div框的left和top等于鼠标移动的坐标减去相对于距离被点击对象左边和右边的距离，当鼠标点击释放的时候，div框的left和top的值赋予给被点击对象的left和top，最后一定要用removeChild将div框给删除，如果不删除的话则会在页面中每次拖拽都会形成一个div框。下面代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset='utf-8'>
		<title></title>
		<style type="text/css">
			#box{
				position:absolute;
				left:100px; 
				top:100px; 
				padding:5px; 
				background:#f0f3f9; 
				font-size:12px; 
				-moz-box-shadow:2px 2px 4px #666666; 
				-webkit-box-shadow:2px 2px 4px #666666;
			}
			#main{
				border:1px solid #a0b3d6; 
				background:white;
			}
			#bar{
				line-height:24px; 
				background:#beceeb; 
				border-bottom:1px solid #a0b3d6; 
				padding-left:5px;
				cursor:move;
			}
			#content{
				width:420px; 
				height:250px; 
				padding:10px 5px;
			}
			#hideDiv{
				position: absolute;
				border: 1px dashed black;
			}
		</style>
	</head>
	<body>
		<div id = "box">
		    	<div id = "main">
		        		<div id = "bar">拖拽</div>
		        		<div id = "content">内容……</div>
		    	</div>
		</div>
	</body>
	<script type="text/javascript">
		var div = document.getElementById('bar')
		var parentDiv = div.parentNode.parentNode
		div.onmousedown = function(ev) {
			var hideDiv = document.createElement('div')
			// hideDiv.setAttribute('id', 'hideDiv')
			hideDiv.id = 'hideDiv'
			hideDiv.style.width = parentDiv.offsetWidth - 2 + 'px'
			hideDiv.style.height = parentDiv.offsetHeight - 2 + 'px'
			hideDiv.style.top = parentDiv.offsetTop + 'px'
			hideDiv.style.left = parentDiv.offsetLeft + 'px'
			document.body.appendChild(hideDiv)

			var oevent = ev || event
			var disX = oevent.clientX - parentDiv.offsetLeft
			var disY = oevent.clientY - parentDiv.offsetTop

			if (div.setCapture) {
				div.onmousemove = moveArea
				div.onmouseup = moveUp
				div.setCapture()
			} else {
				document.onmousemove = moveArea
				document.onmouseup = moveUp
			}

			function moveArea(ev) {
				var oEvent = ev || event
				var l = oEvent.clientX - disX
				var t = oEvent.clientY - disY
				// 不会超出可视区
				if(l < 0) {
					l = 0
				}
				else if (l > document.documentElement.clientWidth - parentDiv.offsetWidth) {
					l = document.documentElement.clientWidth - parentDiv.offsetWidth
				};
				if(t < 0) {
					t = 0
				}	
				else if (t > document.documentElement.clientHeight - parentDiv.offsetHeight) {
					t = document.documentElement.clientHeight - parentDiv.offsetHeight
				};
				hideDiv.style.left = l + 'px'
				hideDiv.style.top = t + 'px'
			}
			function moveUp() {
				this.onmousemove = null
				this.onmouseup = null
				if (div.releaseCapture) {
					div.releaseCapture()
				};
				parentDiv.style.left = hideDiv.offsetLeft + 'px'
				parentDiv.style.top = hideDiv.offsetTop + 'px'
				document.body.removeChild(hideDiv)
			}
			return false
		}
	</script>
</html>

对拖拽的高级应用，实现带框拖拽

猜你喜欢