js实现简单的鼠标拖拽

拖拽的三剑客：
               1、 mousedown   记录当前鼠标按下位置和被拖拽物体的相对距离。
                    offsetX = e.clientX - node.offsetLeft;
                    offsetY = e.clientY - node.offsetTop;
               2、 mousemove   被拖拽物体要和鼠标保持相对距离。
               3、 mouseup   取消拖拽

 

js代码

            window.onload = function(){
				var oDiv = document.getElementById("div1");//获取到想要拖拽的节点
				//记录相对距离
				var offsetX = 0;
				var offsetY = 0;

				//鼠标按下记录相对距离
				oDiv.onmousedown = function(ev){
					var e = ev || window.event;//兼容ie浏览器
					offsetX = e.clientX - oDiv.offsetLeft;//记录位于拖拽节点的相对位置
					offsetY = e.clientY - oDiv.offsetTop;
                    
					document.onmousemove = function(ev){
						var e = ev || window.event;//兼容ie浏览器
						oDiv.style.left = e.clientX - offsetX + 'px';
						oDiv.style.top = e.clientY - offsetY + 'px';
					}
				}
				//取消拖拽
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}

css代码

#div1{
    width: 200px; 
    height: 200px; 
    background-color: red; 
    position: absolute;/*设置绝对定位，脱离文档流，便于拖拽*/  
}

html代码

<div id = 'div1'></div>