Высота отображения в реальном времени при изменении размера

Question

Я пытаюсь отобразить текущую высоту div внутри этого div, и он должен обновить во время изменения размера.

Jquery UI

$(function() { 
    $(".event").resizable({ 
     grid: 10, 
     minWidth: 250, 
     maxWidth: 250, 
     minHeight: 25 
    }); 
}); 
    $(function() { 
     $("#calendar").sortable(); 
     $("#calendar").disableSelection(); 
    }); 

HTML

<ul id="calendar"> 
    <li class="event event1"><div id="height1"></div></li> 
    <li class="event event2"><div id="height2"></div></li> 
</ul> 

Я пытался несколько вещей, но безрезультатно. Например: я пытался использовать setInterval(), но я предполагаю, что я не использовал его правильно.

Может ли кто-нибудь помочь мне?

Редактировать Добавление следующего кода в параметр resizable не помогло.

resize:function(){$('#height1').html($('#calendar').height())} 

http://jsfiddle.net/PaulvdDool/TDD2r/1/

Answer 1

Может быть, его то, что вы ищете:

$(".event").resizable({ 
     grid: 10, 
     minWidth: 250, 
     maxWidth: 250, 
     minHeight: 25, 
     resize:function(){$('#height1').html($('#calendar').height())} 
    });