Question

I have many divs distributed in rows and columns, (generated using jQuery). Each one of these divs is re-sizable, using JQuery UI Resizable. In order to define the requirements, all divs must use absolute positioning. So, when I re-size any of these divs, the script should update the top attribute of all divs below this, (located in the same column and one row after the current resizing div).

This is the code I have now:

updatePositions: function() {
        var update = 0;
        $(".element").resizable({
            handles: 's',
            start: function(event, ui) {
                event.stopPropagation();
                var el = $(this);
                var el_row = parseInt(el.attr("row"));
                var el_rel = parseInt(el.attr("rel"));
                var el_col = parseInt(el.attr("col"));
                update = $(".element").filter(function() {
                    return(
                        $(this).attr("row") > el_row &&
                        $(this).attr("col") == el_col &&
                        $(this).attr("rel") != el_rel
                    );
                    });
            },
            resize: function(event, ui) {
                update.each(function(event){
                    var top = $(this).position().top + $(this).height() + 20;
                    $(this).css("top", top )
                });
            }
        })
    }

And here is an example: JSFiddle

As you can see, all the divs are found just right and I can update the top position. But for some reason it’s getting crazy when resizing! It seems like I’m doing the update as many times as found tiles on each selected div.

Answer 1

finally I solved this problem. JSFiddle

this is the js code:

function CacheType(){
    corrtop = 0;
    rel = 0;
}

$.extend({
    updatePositions: function() {
        var update = 0;
        var arr = new Array();
        $(".element").resizable({
            handles: 's',
            start: function(event, ui) {
                event.stopPropagation();
                var el = $(this);
                var el_row = parseInt(el.attr("row"));
                var el_rel = parseInt(el.attr("rel"));
                var el_col = parseInt(el.attr("col"));
                var ex = el.position().top;
                var ey = el.height();
                update = $(".element").filter(function() {
                    if(
                        $(this).attr("row") > el_row &&
                        $(this).attr("col") == el_col &&
                        $(this).attr("rel") != el_rel
                    ){
                        var tmp = new CacheType();
                        tmp.corrtop = $(this).position().top - ex - ey;
                        tmp.rel = $(this).attr('rel');
                        arr.push(tmp);
                        return true;
                    }else{
                        return false;
                    }
                    });
            },
            resize: function(event, ui) {
                var x = $(this).height() + $(this).position().top;
                update.each(function(event){
                    for(var i=0;i<arr.length; i++){
                        var tmp = arr[i];
                        var rel = $(this).attr('rel');
                        if(rel == tmp.rel)
                            $(this).css("top", x + tmp.corrtop);
                    }
                });
            }
        })
    }
});
$(document).ready(function(){
    $.updatePositions();
});