Jquery Resizable：防止在调整大小时重叠 div答案

【问题标题】：Jquery Resizable: Prevent overlapping divs on ResizeJquery Resizable：防止在调整大小时重叠 div
【发布时间】：2018-03-10 17:22:56
【问题描述】：

我在一个父 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() 元素的左侧设置最大宽度。如果左侧或右侧没有兄弟，则根据 parent div 的左侧或右侧设置 maxwidth！

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-resizable

【解决方案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 }); 
            }
        }
    },
});

【讨论】：