サイズ変更時のJQuery UIハンドルイベント

Question

jQueryサイズ変更イベントを実装しています。私がサイズ変更を開始すると、私はマウスを持っている間、コードのベローズは "私"を増加させます。サイズを50px（グリッド：50）に変更すると「i」を1回増やす必要があります。助けていただければ幸いです。

var i = 0; 
$("#element").resizable({ 
    grid: 50, 
    resize: function(e, ui) { 
     console.log(++i); 
    } 
}); 

Answer 1

私はそれを理解します。多分それは誰かを助けるでしょう：

var startWidth, newWidth, i = 0; 
$("#element").resizable({ 
    grid: 50, 
    start: function(e, ui) { 
     startWidth = parseInt(ui.size.width, 10); 
    }, 
    resize: function(e, ui) { 
     newWidth = ui.element[0].offsetWidth; 
     if (newWidth > startWidth) { 
      console.log(++i); 
     } else if (newWidth < startWidth) { 
      console.log(--i); 
     } 
     startWidth = newWidth; 
    } 
});