Javascript JQuery Resizeable-调整大小时更新元素绝对位置

我有许多

div

s分布在行和列中（使用jQuery生成）。这些

div

s中的每一个都可以重新调整大小，使用JQuery UI可调整大小。为了定义要求，所有

div

s必须使用绝对定位。因此，当我重新调整这些div的大小时，脚本应该更新该div下面所有div的

top

属性（位于当前调整大小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 )
                });
            }
        })
    }

下面是一个例子：

---

正如你所看到的，所有的div都被找到了，我可以更新top位置。但由于某些原因，它在调整大小时变得疯狂！似乎我在每个选定的分区上进行更新的次数与在每个分区上找到的瓷砖的次数相同。

最终我解决了这个问题

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

函数CacheType（）{
corrtop=0；
rel=0；
}
$扩展({
updatePositions:function（）{
var更新=0；
var arr=新数组（）；
$（“.element”）。可调整大小({
句柄：“s”，
开始：功能（事件、用户界面）{
event.stopPropagation（）；
var el=$（本）；
var el_row=parseInt（el.attr（“row”）；
var el_rel=parseInt（el.attr（“rel”）；
var el_col=parseInt（el.attr（“col”）；
var ex=标高位置（）.顶部；
var ey=标高高度（）；
update=$（“.element”）.filter（函数（）{
如果(
$（此）.attr（“行”）>el_行&&
$（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）；
返回true；
}否则{
返回false；
}
});
},
调整大小：函数（事件、ui）{
var x=$（this.height（）+$（this.position（）.top）；
更新。每个（功能（事件）{
对于（var i=0；i