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

Question

我正在尝试使用 jQuery 可调整大小来调整我的 div 大小，它工作得很好，除了在 stop 事件之后，jQuery UI 会恢复我的 % 值返回到 pixel 值。

我这里有一个工作 fiddle :http://jsfiddle.net/totszwai/j60h38fy/5/

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

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

而且我不想要一个以像素为单位操作 div 的解决方案，因为从技术上讲我可以在我的设置中添加 n-div，并且带有 % 的代码应该适用于 n-div。

如果你看一下我的邻居 div，% 会保留在那里，只有当前 被覆盖。我还尝试直接使用 ui.element 以及将 ui.size.width 设置为我的 % 但这些都不起作用。

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

如果只有 jQuery 可调整大小采用我的 % 值，一切都会按预期工作。

已解决:嗯，我已经接受了apaul34208的回答，因为我确实询问了如何使用％。然而，为了真正解决我最初想要解决的问题，我最终使用了像素。请参阅我发布的答案 below ，如果这个答案对您有帮助，请点赞。

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 列的情况。 (就像我一样!)