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

我正在尝试使用jQuery Resizeable来调整div的大小，我已经让它工作得很好了，只是在

停止

事件之后，jQuery UI会将我的

%

值恢复为

像素

值

我这里有一把小提琴：

第一次拖动

当前

容器时，它将正确计算所有值，但在

停止

事件之后，jQuery UI将更新%并将其更改回像素。。。因此，下次再次拖动它时，%将丢失

如何强制jQuery将宽度值设置为%？从技术上讲，我可以使用setTimeout之类的东西，但那太难看了

我不希望有一个解决方案来处理像素中的div，因为我可以在我的设置中添加n-div，并且使用%的代码应该可以处理n-div

如果您查看我的

邻居

div，则%保留在那里，只有

当前

被覆盖。我还尝试直接使用

ui.element

，以及将

ui.size.width

设置为我的%。但这些都不起作用

更新：解决方法是每次在

停止

事件中存储数据，并且在

开始

时不再检查数据，但是，这仍然无法解决

停止

返回不正确像素值的问题。请参阅更新的JSFIDLE：

如果只有jqueryresizeable接受我的%值，那么一切都会按预期进行

---

已解决：我接受了

apaul34208

的答案，因为我问过如何使用%。然而，为了真正解决我最初想要解决的问题，我最终使用了像素。查看我发布的答案，如果这个答案对你有帮助，请改为向上投票。

我必须删除ghost并对css进行动画和调整，

display:flex似乎导致了意外的结果，但我想我可能偶然发现了一个简单的解决方案：


$（文档）.ready（函数（）{
$（“.test”）。可调整大小({
句柄：'e'，
调整大小：函数（）{
$（'.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框大小：边框框；
框大小：边框框；
}
html，
身体{
身高：100%；
宽度：100%；
填充：0；
保证金：0；
}
.包装纸{
身高：100%；
宽度：100%；
}
.测试{
浮动：左；
边框：3倍纯红；
}


现在的
邻居
又敲了一个上午，我终于找到了完美的解决方案。其实比我想象的要简单得多，只是我把事情复杂化了

我试图获取它的
ui.helper的动态大小，并试图在
停止时操作相邻元素。但我真正关心的是
这个
元素的宽度和它的近邻元素的宽度。。。因此，我最终做了以下工作：

    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.：）

干杯


注意：jqueryui中的ghost和animate选项仍然像以前一样给出了奇怪的问题。这是从jQuery2.0.2和jQueryUI1.10.3开始的，希望他们能尽快修补它。
我遇到了同样的问题，选择的解决方案对我不起作用，因为我需要将其推广到任意数量的列。
此外，codenamezero的回答没有涉及原始问题要求使用宽度百分比这一事实

在我的例子中，使用百分比表示宽度是必要的，因为我正在实现一个表编辑器，保存的表必须根据呈现的位置动态更改大小

因此，我提出了这个解决方案，其工作原理与codenamezero的解决方案类似，但在停止时，更改的宽度设置为百分比：


请选择此解决方案，这样其他人就不会花一上午的时间试图将apaul34208的解决方案推广到n列的情况。（和我一样！）
我知道我的答案不是一个“好做法”，因为它要求您自定义一个经常更新的库，但它解决了我的问题：
更改jquery-ui.js文件中的“resize”函数，以根据需要操纵宽度。
在我的例子中，我需要调整大小以完全忽略宽度，因此我注释掉了“宽度”更改：

我以为你想让可调整大小的元素与%一起工作，我是否误解了这个问题？在Firefox和Chrome中，您的答案似乎都返回了px中的宽度。。。是的，你是对的。最初我想让它与%一起工作，因为我找不到适当调整div的方法。我想我可以接受你的答案，如果你能修改它，让它与n+1 div一起工作？今天晚些时候我会再尝试一下。我在想应该用这些方法，但它仍然需要大量的工作：呵呵。。。它将不起作用，因为您仍然假设窗口的宽度，所以如果您有嵌套元素，它将不起作用。在我使用像素的示例中，我能够将我的
组件
包含在另一个
组件
中。是的，使用%来归档我想要归档的内容非常棘手，可能不值得花时间，因为使用像素似乎更容易、更合适。但是，我认为仍然可以这样做，但是我们需要保存/处理所有的%并使用存储的%…容器不必是表，因此这将适用于div。如果使用显示表格数据，则可以。我同意不应该用它来格式化页面。在我的例子中，我们显示的是表格数据。谢谢，很好的解决方案！它未通过移位阻力测试（用于纵横比缩放），但
$(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); 
        }
    });
});

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