js拖动效果1

<div id="pro_lay">


<div id="area" class="area">
  <!-- <div id="areaResize"></div> -->
</div>


</div>
 

function Drag(options){
    this.drag = null;
    this.disX = 0;
    this.disY = 0;
    this.options = { 
        dragAimClass:options.dragAimClass?options.dragAimClass:'',
        moveFun:options.moveFun?options.moveFun:function(){}
    }

    this.init();
}
Drag.prototype.addEvents = function(target,eventType,handle){
    if(target.addEventListener){ 
            target.addEventListener(eventType,handle,false);
        
    }else{
            target.attachEvent('on'+eventType,function(){
                handle.call(target,arguments);
            });
        
    };
}

Drag.prototype.removeEvents = function(target,eventType,handle){
        if(target.removeEventListener){
             target.removeEventListener(eventType, handle, false);
         } else if(target.detachEvent){
             target.detachEvent('on' + eventType, handle);
         } else {
             element['on' + eventType] = null;
         }
}

Drag.prototype.init = function(){
    this.mouseMove();
}
Drag.prototype.createDragDom = function(x,y,w,h){
     console.log(x,y,w,h);
    var d = document.createElement('div');
    d.id="dragDom";
    d.style.position = 'fixed';
    d.style.zIndex = 1;
    d.style.border = 'dashed red 1px';
    d.style.boxSizing = 'border-box';
    d.style.transform="translate3d(0,0,0)";
    d.style.left = x+'px';
    d.style.top = y+'px';
    d.style.width = w+'px';
    d.style.height = h+'px';


    document.body.appendChild(d);

    this.drag = d; 
    _this = this;
    this.addEvents(d,'mouseup',function(){
        _this.disX = 0;
        _this.disY = 0;
        _this.removeEvents(d,'mouseup',null);
        _this.drag = null; 
        document.getElementById('dragDom') && 
        document.body.removeChild(document.getElementById('dragDom'));

    })

}

Drag.prototype.mouseMove = function(){
    var _this = this;

    this.addEvents(document,'mouseleave',function(event){
        _this.disX = 0;
        _this.disY = 0; 
        _this.drag = null; 

         document.getElementById('dragDom') && 
        document.body.removeChild(document.getElementById('dragDom'));
    })


    this.addEvents(document,'mousedown',function(event){

         var e = event || window.event; 
        //点中了要拖动的元素
        if(e.target.className.toLowerCase().indexOf(_this.options.dragAimClass)>-1){
            _this.drag = e.target;
            

            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY; 

            _this.disX = x - e.target.offsetLeft;
            _this.disY = y - e.target.offsetTop;

            _this.createDragDom(
            e.target.offsetLeft-scrollX,
            e.target.offsetTop-scrollY,
            e.target.offsetWidth,
            e.target.offsetHeight

            );

        }

    })

    this.addEvents(document,'mousemove',function(event){ 
                if(_this.drag !== null){
                var e = event || window.event;
            var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
            var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
            var x = e.pageX || e.clientX + scrollX;
            var y = e.pageY || e.clientY + scrollY;  

                _this.drag.style.left = (x - _this.disX-scrollX)+'px';
                _this.drag.style.top = (y - _this.disY-scrollY)+'px';

                _this.options.moveFun(x,y);
            
            }
                
        
        })
}


window.onload = function(){
    var x = null;
    var y = null;
    new Drag({ 
        dragAimClass:"area",
        moveFun:function(x,y){
            console.log(x,y);
        }
    })

    


}

body{

  padding:0;
  margin:0;
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
padding-left:40px;
}
#a{
    height: 200px;
}
#area_lay{

    width: 1000px;
    height:1000px;
    background: #ddd;

}
#area{
  width:100px;
  height:50px;
  background:#000;
  position:relative; 
  top:10px
}
#areaResize{
  position:absolute;
  left:100px;
  top:100px;
  width:20px;
  height:20px;
  background:red;
}