Jquery Resizable：防止在調整大小時重疊 div

Question

我在一個父 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 });
        }
    },

});

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

我正在嘗試做的事情：

根據 prev() 元素的右側設置我當前正在調整大小的 div 的最大寬度，如果從右側調整大小，則根據 next() 元素的左側設置最大寬度。 如果左側或右側沒有兄弟，則根據父div左側或右側設置maxwidth！

Answer 1

我想通了。 我希望這對某人有所幫助:-) 我所做的是檢查增加來自哪個軸，然后根據上一個或下一個實施增加！

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