jquery resizable, get overlapped element when done dragging

I have a table of time slots (a day view of a calendar) 8am - 5pm, one row per hour. I have some events overlayed on top of the timeslot for the particular event. The event is basically an absolutely positioned div on top of the table. I am able to position the event div and size it properly so that an event from 1pm - 3pm is tall enough to span from the 1pm slot to 3pm slot.

My problem is that I want to make this event div resize开发者_如何学Cable. So I use the jquery code:

$('.event').resizable(
{
    'handles': 'n,s'
});

What I need to do is figure out what time slot the event is covering when the resizer is dragged. So, if I drag the top of the event div to from the 1pm slot to the 9am slot, I need to be able to get the 9am slot element when the user stops dragging the resizer. How can I determine what timeslot row the event is resized to?

---

If your slots are a fixed height, you can use the position and height of the event to determine which slots the event spans. Something like this:

http://jsfiddle.net/2YBxP/1/