SOURCE

var Event = {};
Event.addEvents = function(target,eventType,handle){
    if(target.addEventListener){
        Event.addEvents = function(target,eventType,handle){
            target.addEventListener(eventType,handle,false);
        };
    }else{
        Event.addEvents = function(target,eventType,handle){
            target.attachEvent('on'+eventType,function(){
                handle.call(target,arguments);
            });
        };
    };
    Event.addEvents(target,eventType,handle);
};

var drag = null;
var disX = 0;
var disY = 0;
Event.addEvents(document,'mouseleave',function(event){
  drag = null;
})
Event.addEvents(document,'mousemove',function(event){
  
  		if(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; 
        
        if(drag.id == 'areaResize'){
           //限制拖动的区域 不能越过area的上边线和左边线
          let hx = x - disX;
          let hy = y - disY;

          hx = (hx<=20)?20:hx;
          hy = (hy<=20)?20:hy;


          drag.style.left = hx+'px';
          drag.style.top = hy+'px';


          console.log('重置area大小');
          let area = document.getElementById('area');
          
          area.style.width = hx+'px';
          area.style.height = hy+'px';
          
          
        }else{
          drag.style.left = (x - disX)+'px';
          drag.style.top = (y - disY)+'px';
        }
          
      
        
        
  
      }
  		 
  
})
window.onload = function(){
  
  
  Event.addEvents(document.getElementById('area'),'mousedown',function(event){
    	 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; 
    	 
    	 disX = x - event.target.offsetLeft;
    	 disY = y - event.target.offsetTop;
    
    
       console.log(x,y);
       console.log(disX,disY)
       
       drag = event.target;
    
})
  
  
  Event.addEvents(document.getElementById('area'),'mouseup',function(){
    console.log('mouseup');
    drag = null
  })
  
}

<div id="area">
  <div id="areaResize"></div>
</div>

body{

  padding:0;
  margin:0;

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