Javascript 试着做一个拖拉拉伸的元素，为什么它这么紧张？

我正在尝试创建一个dragbar，这样用户就可以在我的页面上拉伸对使用HTML resize不感兴趣的元素的高度或宽度

看起来我很接近，但我不知道为什么 1可移动条在整个页面上跳跃 2可调div随着尺寸的变化而闪烁，有时甚至完全消失

您可以在

这是消息来源

        var elem = $('.layout');
        var resizeBar = $('.resize-bar',elem),
        adjustableWrapper = $('.layout-container-wrapper',elem),
        posDir = 'Left',
        pos = 'X';


        if($(elem).hasClass('layout-updown')){
            posDir = 'Top';
            pos = 'Y';
        } 

        var startPos = resizeBar[0]['offset'+posDir], i = resizeBar[0]['offset'+posDir];
          resizeBar.on('mousedown', function(event) {
            // Prevent default dragging of selected content
            event.preventDefault();
            console.log(event);
            $(document).on('mousemove', mousemove);
            $(document).on('mouseup', mouseup);
          });

          function mousemove(event) {
            i = event['page'+pos] - startPos;
            if(pos==='X') return changeSizeWidth(i,event.offsetX);
            return changeSizeHeight(i,event.offsetY);
          }

          function changeSizeWidth(i,width){
            resizeBar.css({left : i +'px'});
            adjustableWrapper.css({'width': width +'px'});
            console.log(adjustableWrapper.css('width'));
          }

          function changeSizeHeight(i,height){
            resizeBar.css({top : i +'px'});
            adjustableWrapper.css({'height': height +'px'});
            console.log(adjustableWrapper.css('height'));
          }
          function mouseup() {
            $(document).unbind('mousemove', mousemove);
            $(document).unbind('mouseup', mouseup);
          }

---

请不要回复关于使用库的建议，我在示例中有jQuery，但我在项目中使用angular，并试图在这一点上不添加其他库

最后，我通过将移动条元素的移动更改为需要增长或收缩的元素来实现这一点

css有点混乱，但这里有一个更新的JSFIDLE结果

函数更改SizeWidthleft{ css{'width'：left+'px'}； }