I am trying to use jQuery’s draggable and sortable to sort elements listed inside

Question

0

Editorial Team

Asked: June 6, 20262026-06-06T14:59:55+00:00 2026-06-06T14:59:55+00:00

I am trying to use jQuery’s draggable and sortable to sort elements listed inside

0

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?