Question

我在一个父div中有多个div。每个div都可以调整大小，但问题是调整大小，它们相互重叠，而不是停止在左或右兄弟的边缘调整大小。

我认为I found a solution但解决方案似乎只在一侧工作，一旦应用，宽度不再增加。

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

});

JSFiddle演示：https://jsfiddle.net/1spkLaku

我要做的是：

根据prev（）元素的右侧设置我当前正在调整大小的div的最大宽度，如果从右侧调整大小，则根据next（）元素左侧设置max width侧。如果左侧或右侧没有兄弟，请根据左侧或右侧的父级 div设置最大宽度！

Answer 1

我想出来了。我希望这可以帮助某人:-)我所做的是检查增加的轴是什么，然后根据prev或next实施增加！

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

Jquery Resizable：防止在Resize上重叠div

1 个答案: