How do I use jQuery sortable for elements in a specific table column only?

Question

I am trying to use jQuery's draggable and sortable to sort elements listed inside of a specific column of a table.

The reason is that I essentially want to fit people into timeslots.

I have a table as such:

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>1:00 PM</td>
    <td><div class="personSortable">Person 1</div></td>
  </tr>
  <tr>
    <td>2:00 PM</td>
    <td><div class="personSortable">Person 2</div></td>
  </tr>
  <tr>
    <td>3:00 PM</td>
    <td><div class="personSortable">Person 3</div></td>
  </tr>
  <tr>
    <td>4:00 PM</td>
    <td><div class="personSortable">Person 4</div></td>
  </tr>
</table>

I want to make all the divs with the class 'personSortable' sortable into the avaliable time slots. I have looked for an answer but the closest thing i could find was to make the entire row sortable (by making the table the sortable container) - which is not ideal because I can't have the time slots change.

Another idea I had was to create two div wrappers: one with the time slots, and one containing sortable divs for the people, and using the CSS 'float' property to have them line up. Would that be a more ideal approach?

Answer 1

Found this and it seems to do the trick if anyone else was interested:

http://www.redips.net/javascript/drag-and-drop-table-content/