如何强制jQuery resizable使用百分比？

Question

我试图使用jQuery resizable来调整我的div，我已经让它工作得很好，除了在stop事件之后，jQuery UI会将我的%值恢复为pixel值。

我在这里工作小提琴： http ： //jsfiddle.net/totszwai/j60h38fy/5/

当您第一次拖动current容器时，它会正确计算所有值，但是在stop事件之后，jQuery UI会更新％并将其更改回像素...所以下次再次拖动时，％迷路了。

你如何强制jQuery将宽度值设置为％？ 我可以在技术上使用像setTimeout这样的东西，但那太难看了。

而且我不想在像素中操作div的解决方案，因为我可以在我的设置中从技术上添加n-div，并且带有％的代码应该与n-div一起使用。

如果你看看我的neighbor div，％保留在那里，只有current被覆盖。 我也尝试直接使用ui.element ，并将ui.size.width设置为my％，但也没有。

更新 ：解决方法是每次在stop事件中存储数据，并且从不在start时再次检查它，但是，这仍然无法解决stop返回错误像素值的问题。 查看更新的jsFiddle： http ： //jsfiddle.net/totszwai/j60h38fy/6/

如果只有jQuery resizable可以获取我的％值，那么一切都会按预期工作。

解决 ：好吧，我接受了apaul34208的回答，因为我确实问过如何使用％。 但是，要实际解决我原本想要解决的问题，我最终会使用像素。 看到我在下面发布的答案，如果答案对你有所帮助，请转而投票。

Answer 1

我遇到了同样的问题，所选择的解决方案对我不起作用，因为我需要将它推广到任意数量的列。 codenamezero的答案也没有涉及原始问题要求使用宽度百分比这一事实。

对于我的情况，使用宽度百分比是必不可少的，因为我正在实现一个表编辑器，并且保存的表必须根据呈现的位置动态地改变大小。

所以我提出了这个类似于codenamezero解决方案的解决方案，但在停止时，更改的宽度设置为百分比：
http://jsfiddle.net/genpsire/4mywcm1x/14/

$(document).ready(function () {

    var container = $(".wrapper");
    var numberOfCol = 3;
    $(".test").css('width', 100/numberOfCol +'%');

    var sibTotalWidth;
    $(".test").resizable({
        handles: 'e',
        start: function(event, ui){
            sibTotalWidth = ui.originalSize.width + ui.originalElement.next().outerWidth();
        },
        stop: function(event, ui){     
            var cellPercentWidth=100 * ui.originalElement.outerWidth()/ container.innerWidth();
            ui.originalElement.css('width', cellPercentWidth + '%');  
            var nextCell = ui.originalElement.next();
            var nextPercentWidth=100 * nextCell.outerWidth()/container.innerWidth();
            nextCell.css('width', nextPercentWidth + '%');
        },
        resize: function(event, ui){ 
            ui.originalElement.next().width(sibTotalWidth - ui.size.width); 
        }
    });
});

请选择这个解决方案，以便其他人不要花费他们的早晨试图将apaul34208的解决方案推广到n柱情况。 （就像我做的那样！）

Answer 2

我不得不删除幽灵和动画并调整你的CSS， display: flex; 似乎造成了意想不到的结果，但我想我可能偶然发现了一个简单的解决方案：

工作实例

$(document).ready(function() {

  $(".test").resizable({
    handles: 'e',
    resize: function() {
      $('.test:first-of-type').css('width', $('.test:first-of-type').outerWidth() * 100 / $(window).innerWidth() + '%');
      $('.test:nth-of-type(2)').css('width', 100 - ($('.test:first-of-type').outerWidth() * 100 / $(window).innerWidth()) + '%');

    }

  });
});

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
}
.test {
  float: left;
  border: 3px solid red;
}

<div class="wrapper">
  <div class="test" style="width: 50%; height: 200px;">current</div>
  <div class="test" style="width: 50%; height: 200px;">neighbor</div>
</div>

Answer 3

在将它锤击另一个早晨后，我终于得到了完美的解决方案。 它实际上比我想象的要简单得多，只是因为我过度复杂化了。

我试图获得ui.helper动态大小，并尝试在stop处操纵邻居元素。 但我真正关心的是this元素的宽度和它的直接邻居元素的宽度...所以我最终做了以下事情：

    start: function (event, ui) {
        // just remember the total width of self + neighbor
        this.widthWithNeighbor = 
            ui.originalSize.width + ui.element.next().outerWidth();
    },
    resize: function (event, ui) {
        // then simply subtract it!
        ui.element.next().width(this.widthWithNeighbor - ui.size.width);
    },
    stop: function(event, ui) {
        // clean up, is this needed?
        delete this.widthWithNeighbor;
    }

该解决方案适用于并排坐着的n + 1个DIV。 如果您使用高度翻转宽度，它也可以使用垂直堆叠的DIV。 :)

干杯!

工作jsFiddle

注意：来自jQuery-UI的ghost和animate选项仍然像以前一样给出了奇怪的问题。 这是jQuery 2.0.2和jQuery-UI 1.10.3的版本，希望他们能尽快修补它。

Answer 4

我知道我的答案不是一个“好习惯”，因为它要求你自定义一个经常更新的库，但它解决了我的问题：更改jquery-ui.js文件中的“resize”函数以根据需要操作宽度。 在我的情况下，我需要调整大小以完全忽略宽度，所以我注释掉了“宽度”更改：

resize: function( event, ui ) {
        var that = $( this ).resizable( "instance" ),
            o = that.options,
            os = that.originalSize,
            op = that.originalPosition,
            delta = {
                height: ( that.size.height - os.height ) || 0,
    ----------->//width: ( that.size.width - os.width ) || 0,
                top: ( that.position.top - op.top ) || 0,
                left: ( that.position.left - op.left ) || 0
            };

            $( o.alsoResize ).each( function() {
                var el = $( this ), start = $( this ).data( "ui-resizable-alsoresize" ), style = {},
                    css = el.parents( ui.originalElement[ 0 ] ).length ?
        ----------------->[ /*"width",*/ "height" ] :
                            [ "width", "height", "top", "left" ];

                $.each( css, function( i, prop ) {
                    var sum = ( start[ prop ] || 0 ) + ( delta[ prop ] || 0 );
                    if ( sum && sum >= 0 ) {
                        style[ prop ] = sum || null;
                    }
                } );

                el.css( style );
            } );
    },