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