JQuery Resizable - обновляет абсолютную позицию элемента при изменении размера

Question

У меня много divs распределены по строкам и столбцам (генерируется с помощью jQuery). Каждый из этих divРазмер s можно изменить, используя JQuery UI Resizable. Чтобы определить требования, все divs должен использовать абсолютное позиционирование. Поэтому, когда я изменяю размер любого из этих элементов div, скрипт должен обновить top атрибут всех элементов div ниже этого (находится в том же столбце и в одной строке после текущего элемента div для изменения размера).

Вот код, который у меня есть сейчас:

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

И вот пример: JSFiddle

Как видите, все div'ы найдены как раз правильными, и я могу обновить верхнюю позицию. Но по какой-то причине он сходит с ума при изменении размера! Кажется, что я делаю обновление столько раз, сколько найденных плиток на каждом выбранном div.

Answer 1

Наконец я решил эту проблему. JSFiddle

это код js:

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