Javascript Jquery可调整大小：在调整大小时防止重叠div

我在一个父div中有多个div。每个div都可以调整大小，但问题在于调整大小，它们彼此重叠，而不是在左侧或右侧同级的边缘停止调整大小

我想，但解决方案似乎只在一侧起作用，一旦应用，宽度不再增加

var targetPos, targetPrev;


$('.segment').resizable(
{
    handles: "e, w",

    start: function (event, ui) {
        targetPos = ui.element.next().position();

        if(ui.element.next().is('.segment')) {
            $(this).resizable({ maxWidth: targetPos.left });
        }

        if(ui.element.prev().is('.segment')) {
            targetPrev = ui.element.prev();

            var sumOf = (ui.size.width + ui.position.left) - (targetPrev.position().left + targetPrev.outerWidth());
            console.log(sumOf );

            $(this).resizable({ maxWidth: sumOf });
        }
    },

    resize: function(event, ui){ 
        if(ui.element.next().is('.segment')) {
            $(this).resizable({ maxWidth: targetPos.left });
        }

        if(ui.element.prev().is('.segment')) {
            var sumOf = (ui.size.width + ui.position.left) - (targetPrev.position().left + targetPrev.outerWidth());

            $(this).resizable({ maxWidth: sumOf });
        }
    },

});

JSFIDLE演示：

我想做什么：

---

根据prev（）元素的右侧设置当前正在调整大小的div的最大宽度，如果从右侧调整大小，则根据next（）元素的左侧设置最大宽度。如果左侧或右侧没有兄弟节点，则根据父节点左侧或右侧的divs设置maxwidth

我知道了。我希望这对某人有所帮助：-）我所做的是检查增加来自哪个轴，然后根据上一个轴或下一个轴执行增加

var targetPos, targetPrev, handleTarget;


$('.segment').resizable(
{
    handles: "e, w",

    start: function (event, ui) {
        handleTarget = $(event.originalEvent.target);

        targetPos = ui.element.next();
        targetPrev = ui.element.prev();

        if (handleTarget.hasClass('ui-resizable-e')){
            console.log('east');

            if(ui.element.next().is('.segment')) {
                $(this).resizable({ maxWidth: ui.size.width + (targetPos.position().left - (ui.position.left + ui.size.width))-5 });
            } else {
                $(this).resizable({ maxWidth: ui.size.width + ui.element.parent().outerWidth() - (ui.position.left + ui.size.width) - 5 });
            }
        } else {
            console.log('west');

            if(ui.element.prev().is('.segment')) {
                var sumOf = (ui.size.width + ui.position.left) - (targetPrev.position().left + targetPrev.outerWidth()) - 5;

                $(this).resizable({ maxWidth: sumOf }); 
            }
        }
    },

    resize: function(event, ui){ 
        if (handleTarget.hasClass('ui-resizable-e')){
            if(ui.element.next().is('.segment')) {
                $(this).resizable({ maxWidth: ui.size.width + (targetPos.position().left - (ui.position.left + ui.size.width)) - 5 });
            }
        } else {
            if(ui.element.prev().is('.segment')) {
                var sumOf = (ui.size.width + ui.position.left) - (targetPrev.position().left + targetPrev.outerWidth());
                $(this).resizable({ maxWidth: sumOf - 5 }); 
            }
        }
    },
});