鼠标拖动改变DOM高度/宽度

web前端开发中，通过鼠标的拖动改变控件高度和宽度的做法有多种。我以前使用的方法是：为控件添加mousemove事件，当鼠标移到边距时，显示cursor为e-resize，表示可以拖动。在mousedown事件中设置document的鼠标事件，在mouseup中移除document的鼠标事件。这样的做法导致：当鼠标移到控件上后，每动一下鼠标，就需要运行一次move事件。现在优化的做法是：在控件边距上加一div,当在此div上按下鼠标时才触发document的鼠标事件。大大减少了move事件的执行次数。
采用jquery写法，调用方法：$('#resizable').gresizeW();

 $.fn.gresizeW = function () {
        return this.each(function () {
            var jq = $(this);
            jq.wrapInner(' 
 
');//把内容用div括起来，在旁边加一div,用来触发Resize
            jq.children().eq(0).css({ height: '100%', overflow: 'auto' });
            jq.css({ position: 'relative', paddingRight: parseInt(jq.css('padding-right')) + 1 });//留触发Resize的div宽度
            $(' 
 
')
            .on('mousedown', function (e) {
                document.onselectstart = function (e) { return false };//拖动鼠标时不显示选择效果
                var jqResize = $(this).parent();
                $(document).on('mousemove.gym', function (e) {
                    var w = jqResize.offset().left;
                    if (e.pageX - w > 20) jqResize.width(e.pageX - w); //最小留20px
                    e.stopPropagation();
                    return false;
                })
                .on('mouseup.gym', function (e) {
                    $(document).off('.gym');
                    document.onselectstart = function (e) { return true };
                })
            })
        .on('mouseup', function (e) {
            $(document).off('.gym');
            document.onselectstart = function (e) { return true };
        }).appendTo(jq);
      });
    }

$(function () {
  //绑定需要拖拽改变大小的元素对象   
  bindResize(document.getElementById('test'));
});

function bindResize(el) {
  //初始化参数   
  var els = el.style,
    //鼠标的 X 和 Y 轴坐标   
    x = y = 0;
  //邪恶的食指   
  $(el).mousedown(function (e) {
    //按下元素后，计算当前鼠标与对象计算后的坐标  
    x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight;
    //在支持 setCapture 做些东东  
    el.setCapture ? (
      //捕捉焦点   
      el.setCapture(),
      //设置事件   
      el.onmousemove = function (ev) {
        mouseMove(ev || event)
      },
      el.onmouseup = mouseUp
    ) : (
      //绑定事件   
      $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp)
    )
    //防止默认事件发生   
    e.preventDefault()
  });
  //移动事件   
  function mouseMove(e) {
    //宇宙超级无敌运算中... 
    els.width = e.clientX - x + 'px', //改变宽度
      els.height = e.clientY - y + 'px' //改变高度 
  }
  //停止事件   
  function mouseUp() {
    //在支持 releaseCapture 做些东东   
    el.releaseCapture ? (
      //释放焦点   
      el.releaseCapture(),
      //移除事件   
      el.onmousemove = el.onmouseup = null
    ) : (
      //卸载事件   
      $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp)
    )
  }
} 

怎么设置成只有右边的边框才能拖动，改变大小。在网上找的一段代码，只要点击DIV都可以改变大小。而且，我用 cursor: e-resize; 属性，鼠标移到DIV上，就变成了左右可拖动的箭头形状。

后续还会将此封装成vue组件，实现的原理同样还是基于dom事件，但是如果要做的通用，难度就大了，敬请期待。