如何强制 jQuery 调整大小以使用百分比？

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 设置为我的%，但这些都不起作用。

更新：一种解决方法是每次在stop 事件中存储数据，并且不再在start 再次检查它，但是，这仍然不能解决@987654335 的问题@ 返回不正确的像素值。查看更新的 jsFiddle：http://jsfiddle.net/totszwai/j60h38fy/6/

如果只有 jQuery resizable 采用我的 % 值，一切都会按预期工作。

已解决：嗯，我接受了apaul34208 的回答，因为我确实询问了如何使用 %.然而，为了真正解决我最初想要解决的问题，我最终改用像素。请参阅我发布的答案 below，如果该答案对您有所帮助，请改为投票。

Answer 1

我遇到了同样的问题，选择的解决方案对我不起作用，因为我需要将其推广到任意数量的列。 代号零的回答也没有处理原始问题要求使用宽度百分比的事实。

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

所以我想出了这个解决方案，它的工作原理类似于 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

我不得不删除 ghost 和动画并稍微调整你的 css，display: flex; 似乎导致了意想不到的结果，但我想我可能偶然发现了一个简单的解决方案：

Working Example

$(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。 :)

干杯！

Working 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 );
            } );
    },