SOURCE

console 命令行工具 X clear

                    
>
console
window.onload = function(){
				//鼠标初始化位置
				var initMouseX = 0;
				var initMouseY = 0;
				//元素的初始化位置
                var initObjX = 0;
                var initObjY = 0;
                
                //鼠标按下标识
                var isDraging = false;
                
				//DOM-Object
				function g(id){
					return document.getElementById(id);
				}
                //事件处理程序
				function eventHandler(elem, eventName, eventType){
					// elem.attachEvent 兼容IE8及以下版本浏览器事件
					// addEventListener 支持Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数
					elem.addEventListener ? elem.addEventListener(eventType, eventName, false) : elem.attachEvent('on'+eventType, eventName);
				};
                
                //获取style属性值
				function getStyleValue(elem, property){
					//getComputedStyle、currentStyle 返回CSS样式声明对象([object CSSStyleDeclaration]) 只读
					//getComputedStyle 支持IE9+以上及正常浏览器
					//currentStyle 兼容IE8及IE8以下获取目标元素style样式
					return window.getComputedStyle(elem,null) ? window.getComputedStyle(elem,null)[property] : elem.currentStyle[property];
				}
				//设置目标元素的位置
				function setObjPos(elem, pos){
					elem.style.left = pos.x +'px';
					elem.style.top = pos.y +'px';
				}
                //mousedown
				eventHandler(g('box'), function(event){
					//鼠标初始化位置
					initMouseX = event.clientX;
                    initMouseY = event.clientY;
                    //元素的初始化位置
                    initObjX = parseInt(getStyleValue(g('box'), 'left'));
                    initObjY = parseInt(getStyleValue(g('box'), 'top'));
                    
                    //鼠标按下标识
                    isDraging = true;
				},'mousedown');
				//mousemove
				eventHandler(g('box'), function(event){
					if(isDraging){
						//鼠标初始化位置
						var moveX = event.clientX - initMouseX + initObjX;
	                    var moveY = event.clientY - initMouseY + initObjY;
	                    
	                    //设置元素位置
	                    setObjPos(g('box'), {x:moveX, y:moveY});
                   }
				},'mousemove');
				//mouseup  document.documentElement 防止鼠标拖出元素外
				eventHandler(document.documentElement, function(event){
					//鼠标离开停止动画
					isDraging = false;
				},'mouseup');
			}
<div class="box" id="box" style="position: absolute;left: 25px;top: 25px;"></div>
body {
				margin: 0;
				padding: 0;
				position: relative;
			}
.box {
	width: 100px;
	height: 100px;
	background: deeppink;
	position: absolute;
	left: 25px;
	top: 25px;
	cursor: move;
}