如何强制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一起使用.

如果你看看我的neighbordiv,%保留在那里,只有current被覆盖.我也尝试过ui.element直接玩,以及设置ui.size.width我的%,但也没有任何工作.

更新:解决方法是每次在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柱的情况.(就像我做的那样!)