js拖拽——带框

拖拽大概原理都在这了，注释也写的很清楚。上面也不多说了

		*{
			margin: 0;
			padding: 0;
		}
		#div1{
			width: 200px;
			height: 200px;
			background: red;
			position: absolute;
		}
		.box{
			border: 1px dashed black;
			position: absolute;			
		}

<div id="div1"></div>

window.onload = function()
{
	var oDiv = document.getElementById('div1');
	var disX = 0;					
	var disY = 0;					//这两个变量是 鼠标点击的位置到 oDiv 的 top和 left

	oDiv.onmousedown = function(ev)
	{
		var oEvent = ev || evnet;

		disX = oEvent.clientX - oDiv.offsetLeft ;			//界面点击的位置 减去 oDiv 的 left 可求得
		disY = oEvent.clientY - oDiv.offsetTop ;		

		var oBox = document.createElement('div');			//创建 边框 元素

		oBox.className = 'box';
		oBox.style.width = oDiv.offsetWidth + 'px';			
		oBox.style.height = oDiv.offsetHeight + 'px';		//让边框 大小 和 oDiv差不多
		oBox.style.left = oDiv.offsetLeft + 'px';		
		oBox.style.top = oDiv.offsetTop + 'px';				//每次点击 oBox 的位置跟 oDiv 原本的位置一致

		document.body.appendChild(oBox);			//创建完 要加入到body中 别忘了

		if(oDiv.setCapture){						//这是IE下的
			oDiv.onmousemove = mouseMove;
			oDiv.onmouseup = mouseUp;
			oDiv.setCapture();						//事件的捕获
		}
		else										//Chrome FF下
		{			
			document.onmousemove = mouseMove;		//用document 是为了鼠标移动太快移出了 oDiv 时，
			document.onmouseup = mouseUp;			//物体还能继续移动,选用document做对象。
		}

		function mouseMove(ev)
		{
			var oEvent = ev || event;

			oBox.style.left = oEvent.clientX - disX +'px';
			oBox.style.top = oEvent.clientY - disY +'px';
		}

		function mouseUp()
		{
			this.onmousemove = null;
			this.onmouseup = null ;

			oDiv.style.left = oBox.offsetLeft +'px';
			oDiv.style.top = oBox.offsetTop +'px';
			document.body.removeChild(oBox);		//鼠标抬起，边框消失

			if(oDiv.setCapture)						//事件捕获结束。
				this.releaseCapture();
		}	

		return false;								//这个返回再chorme ff 下作用很大
	}
}