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 == 'topBar') {
            //限制拖动的区域 不能越过area的上边线和左边线
            let hx = x;
            let hy = y;

            hx = (hx <= 20) ? 20 : hx;
            hy = (hy <= 20) ? 20 : hy;
            let area = document.getElementById('area');
            area.style.height = hy + 'px';


        } else if (drag.id == 'bottomBar') {
            //限制拖动的区域 不能越过area的上边线和左边线
            let hx = x - disX;
            let hy = y - disY;

            hx = (hx <= 20) ? 20 : hx;
            hy = (hy <= 20) ? 20 : hy;
            let area = document.getElementById('area');

            area.style.height = hy + 'px';


        } else if (drag.id == 'leftBar') {
            //限制拖动的区域 不能越过area的上边线和左边线
            let hx = x - disX;
            let hy = y - disY;

            hx = (hx <= 20) ? 20 : hx;
            hy = (hy <= 20) ? 20 : hy;
            let area = document.getElementById('area');

            area.style.width = hx + 'px';
            // area.style.height = hy + 'px';


        } else if (drag.id == 'rightBar') {
            //限制拖动的区域 不能越过area的上边线和左边线
            let hx = x - disX;
            let hy = y - disY;

            hx = (hx <= 20) ? 20 : hx;
            hy = (hy <= 20) ? 20 : hy;
            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, '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, 'mouseup', function () {
        console.log('mouseup');
        drag = null
    })

}

<div id="bg">
    <div id="area">
        <div id="topBar"></div>
        <div id="bottomBar"></div>
        <div id="leftBar"></div>
        <div id="rightBar"></div>
    </div>
</div>

body{
  padding:0;
  margin:0;
}
#bg {
  width: 400px;
  height: 400px;
  border: 1px solid #333;
}
#area{
  width:100px;
  height:100px;
  border: 1px solid #333;
  position:absolute;
  left:10px;
  top:10px
}
#topBar{
  position:absolute;
  left:-1px;
  top:-3px;
  width:calc(100% + 2px);
  height:6px;
  background:blue;
  transition: all 0.3s;
  opacity: 0;
}
#topBar:hover{
  opacity: 1;
}


#bottomBar{
  position:absolute;
  left:-1px;
  bottom:-3px;
  width:calc(100% + 2px);
  height:6px;
  background:blue;
  transition: all 0.3s;
  opacity: 0;
}
#bottomBar:hover{
  opacity: 1;
}


#leftBar{
  position:absolute;
  left:-3px;
  top:-1px;
  height:calc(100% + 2px);
  width:6px;
  background:blue;
  transition: all 0.3s;
  opacity: 0;
}
#leftBar:hover{
  opacity: 1;
}


#rightBar{
  position:absolute;
  right:-3px;
  top:-1px;
  height:calc(100% + 2px);
  width:6px;
  background:blue;
  transition: all 0.3s;
  opacity: 0;
}
#rightBar:hover{
  opacity: 1;
}