CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-resizable
HalesEnchanted
HalesEnchanted

Reputation: 665

Jquery Resizable: Prevent overlapping divs on Resize

I have multiple divs in one parent div. Each div is resizable but the issue is on resize, they overlap each other, instead of stopping resizing at the edge of the left or right siblings.

I thought I found a solution but the solution only seems to be working on one side and once it is applied, the width no longer increases. 

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 Demo: https://jsfiddle.net/1spkLaku

What I am trying to do:

Set the max width of the div I am currently resizing based on the prev() element's right side and if resizing from the right side, set max width based on the next() element's left side. And if there is no sibling to the left or the right, set the maxwidth based on the parent divs left or right side!

Upvotes: 2

Views: 1065

Answers (1)

HalesEnchanted
HalesEnchanted

Reputation: 665

I figured this out. I hope this helps someone :-) What I did was to check what axis the increase was coming from then implement the increase either based on prev or 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 }); 
            }
        }
    },
});

Upvotes: 1

Related Questions