SOURCE

console 命令行工具 X clear

                    
>
console
        function Drag () {  
            this.initialize.apply(this, arguments);   
        }  
      
        Drag.prototype = {  
      
            // 初始化  
            initialize : function (element, options) {  
                  
                this.element = this.$(element); // 被拖动的对象  
                this._x = this._y = 0; // 鼠标在元素中的位置  
                this._moveDrag = this.bind(this, this.moveDrag);   
                this._stopDrag = this.bind(this, this.stopDrag);  
      
                // 设置参数  
                this.setOptions(options);  
                  
                // 设置鼠标去“拖”的“柄”对象(注意与被拖动的对象区别)  
                this.handle = this.$(this.options.handle);  
      
                // 设置回调函数  
                this.onStart = this.options.onStart;  
                this.onMove = this.options.onMove;  
                this.onStop = this.options.onStop;  
      
                this.handle.style.cursor = "move";  
      
                this.changeLayout();  
      
                // 注册开始拖动事件  mousemove
               // this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag));  
				this.addHandler(this.handle, "mousemove", this.bind(this, this.moveDrag)); 
			//	this.addHandler(this.handle, "mouseup", this.bind(this, this.stopDrag)); 
            },  
      
            // 改变被拖动对象的布局属性  
            changeLayout: function () {  
                this.element.style.top = this.element.offsetTop + "px";  
                this.element.style.left = this.element.offsetLeft + "px";  
                this.element.style.position = "absolute";  
                this.element.style.margin = "0";  
            },  
      
            startDrag : function (event) {  
                var event = event || window.event;  
				
				this.element.detachEvent
      
                this._x = event.clientX - this.element.offsetLeft;  
                this._y = event.clientY - this.element.offsetTop;  
				
				
                this.addHandler(document, "mousemove", this._moveDrag);  
				
              //  this.addHandler(document, "mouseup", this._stopDrag);  
      
                this.preventDefault(event);  
      
                this.handle.setCapture && this.handle.setCapture();  
      
                this.onStart();  
            },  
            moveDrag : function (event) {  
                var event = this.getEvent(event);  
      					console.log(event)
                //var iTop = event.clientY - this._y;  
               // var iLeft = event.clientX - this._x;  
                //可在此处设定元素拖动之后的位置
                this.element.style.top = 100 + "px";  
                this.element.style.left = 500 + "px";  
                this.onMove();  
               	$(document).mousemove(function(e){
                   $("#movePoint").text(e.pageX + ", " + e.pageY);
              });
            },  
            stopDrag : function (event) {  
                  
                this.removeHandler(document, "mousemove", this._moveDrag);  
              //  this.removeHandler(document, "mouseup", this._stopDrag);  
                this.handle.releaseCapture && this.handle.releaseCapture();  
       						console.log(event.clientY,'----')
                this.onStop()  
          
            },  
            setOptions : function (options) {  
                this.options = {  
                    handle: this.element,  //事件对象  
                    onStart : function () {}, // 开始时回调函数  
                    onMove : function(){}, // 拖拽时回调函数  
                    onStop : function(){} // 停止时回调函数  
                };  
                for(var p in options){  
                    this.options[p] = options[p];  
                }  
            },  
            $ : function (id) {  
                return typeof id === "string" ? document.getElementById(id):id;  
            },  
            addHandler : function (element, eventType, handler) {  
                if(element.addEventListener){  
                    return element.addEventListener(eventType, handler, false);  
                }else{  
                    return element.attachEvent("on"+eventType, handler);  
                }  
            },  
            removeHandler : function (element, eventType, handler) {  
                if(element.removeEventListener){  
                    return element.removeEventListener(eventType, handler, false);  
                }else{  
                    return element.detachEvent("on" + eventType, handler);  
                }  
            },  
            getEvent: function (event) {  
                    return event || window.event;  
            },  
            preventDefault: function (event) {  
                if(event.preventDefault){  
                    event.preventDefault();  
                }else{  
                    event.returnValue = false;  
                }  
            },  
            bind : function  (obj, handler) {  
                return function  () {  
                    return handler.apply(obj, arguments);  
                }  
            }  
        };  
      
        window.onload = function () {  
            var drag_div = document.getElementById("movePoint");  
      
            var drag = new Drag(drag_div, {handle: drag_div});  
			
	//		var evDownObj = new Event('mousedown');		
	 //       drag_div.dispatchEvent(evDownObj);
			
			var evMoveObj = new Event('mousemove');
            drag_div.dispatchEvent(evMoveObj);
				
		//	var evUpObj = new Event('mouseup');
    //        drag_div.dispatchEvent(evUpObj);
		
        }  
<div class="" id="movePoint">
</div>
#movePoint {
  width: 20px;
  height: 20px;
  background: #f00;
}