JQuery Resizable - 在调整大小时更新元素绝对位置

Question

我有许多分布在行和列（使用jQuery生成）的div。使用JQuery UI Resizable，这些div中的每一个都是可调整大小的。为了定义要求，所有div的s 必须使用绝对定位。所以，当我重新设置这些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) 
       }); 
      } 
     }) 
    } 

而且这里有一个例子：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(); 
});