JS实现拖拽

第二篇写写很常见的拖拽吧，先来分析一下拖拽的原理吧，首先说一下传说中的拖拽三剑客：mousedown，mousemove，mouseup。
mousedown：鼠标按下事件；
mousemove：鼠标移动事件；
mouseup：鼠标抬起事件。
下面直接上代码：
写一个DIV：
<div id = 'div1'><div>
随便写一下css样式，大家可以根据自己的需求自己写css样式

		<style>
			#div1{width: 200px; height: 200px; background-color: red; position: absolute; left: 100px; top: 100px}
		</style>

接下来写JS代码，首先获得div节点，这个不用多说，学js的人都懂。。。

var oDiv = document.getElementById("div1");

然后声明两个变量，目的是当按下时记录下鼠标相对于div的位置，这个位置是鼠标移动时也不会改变的，并且是可以计算出来的，代码如下：

oDiv.onmousedown = function(event){
					var e = event || window.event;
					offsetX = e.clientX - oDiv.offsetLeft;
					offsetY = e.clientY - oDiv.offsetTop;


					//改变当前被拖拽物体的位置
					document.onmousemove = function(event){
						var e = event || window.event;
						oDiv.style.left = e.clientX - offsetX + 'px';
						oDiv.style.top = e.clientY - offsetY + 'px';
					}
				}

在mousedown时间里包含一个mousemove事件，mousemove事件必须写在mousedown事件里面，然后鼠标移动时改变div的left值和top值就可以了。

【注】在整个拖拽的过程中，鼠标按下的位置和被拖拽物体的相对位置是永远保持不变的。
最后，写一个鼠标抬起事件就可以了，当鼠标抬起的时候，取消mousedown事件。

document.onmouseup = function(){
					document.onmousemove = null;
				}

完整的js代码如下：

window.onload = function(){
				var oDiv = document.getElementById("div1");
				var offsetX = 0;
				var offsetY = 0;
				oDiv.onmousedown = function(event){
					var e = event || window.event;
					offsetX = e.clientX - oDiv.offsetLeft;
					offsetY = e.clientY - oDiv.offsetTop;


					//改变当前被拖拽物体的位置
					document.onmousemove = function(event){
						var e = event || window.event;
						oDiv.style.left = e.clientX - offsetX + 'px';
						oDiv.style.top = e.clientY - offsetY + 'px';
					}
				}
				//取消拖拽
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}

鼠标拖拽完成！