drag/drop a *part* of a row?

I'm looking for suggestions on how to implement a UI feature.

I'm working on a scheduling app for a small music competition in my town. There are time slots, and students performing. We assign a kid a time, but something always comes up and kids have to be rearranged. So let's say the schedule is set up as a table something along the lines of

11:00 joe smith

11:20 sally jones

11:40 john doe

All good until joe smith learns he has a soccer practice and can't make it at 11:00. I'd love to be able to drag joe's name into a different position without开发者_JAVA百科 moving the time itself ("joe smith" moves, 11:00 does not move). Does that make sense? Has anyone faced this issue before? I will need to write the updated data (including the time) back to a database, so the time somehow has to be bound to the student, not just some visual thing. I'm more comfortable with jQuery than some of the other javascript/ajax frameworks, so that's the environment I hope to work in.

Thanks for any pointers.

Steve

I would make a grid using tables. Table cells represent times, DIVs placed in the cells represent students. When dragging you read the parent element's time, drag the student, read the drop parent's time and update accordingly.