Question

我正在尝试创建一个拖动条，以便用户可以在页面上拉伸元素的高度或宽度（对使用HTML调整大小不感兴趣）。

看起来我非常接近，但我无法弄明白为什么 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，但我在项目中使用了角度，并且我在此时尝试不添加一堆其他库。

Answer 1

我最终通过改变从move-bar元素到需要增长或缩小的元素的移动来实现这一点。

css有点乱，但这里是结果的更新jsfiddle http://jsfiddle.net/dYUz7/2/

function changeSizeWidth(left){ adjustableWrapper.css({'width': left +'px'}); }

试图拖动拉伸元素，为什么它如此跳跃？

1 个答案: