I'm trying to build a website that has one set of staff in the database, and multiple departments. Each staff member may be part of multiple departments. The back-end code is fine with a many-many setup like so:
`staff` `depts`
| id | name | | id | name |
| 1 | Alice | | 1 | Legal |
| 2 | Bob | | 2 | Accounting |
| 3 | Eve |
`depts_staff`
| id | dept_id | staff_id | dept_order |
| 1 | 1 | 1 | 3 |
| 2 | 1 | 2 | 1 |
| 3 | 1 | 3 | 2 |
| 4 | 2 | 1 | 2 |
| 5 | 2 | 2 | 1 |
I need a way, preferably using jQuery, of allowing users to move staff from "not in the department" to "in the department", sorting them once they are "in the department", and also removing them from the department, meaning they would need to reappear in the "not in the department" list.
In short, each member of staff must appear on-screen only once. Either they are in the department, or they are not.
List Type | Requirement
in the department | draggable (to move from this list to the other)
in the department | droppable (to accept items from the other list)
not in department | draggable (to move from this list to the other)
not in department | droppable (to accept items from the other list)
not in department | sortable (as staff must appear in a set order)
I thought I would be able to use a pair of draggable/dropables and make one sortable, but the interaction between these various jQuery UI components leaves a lot to be desires. I'm ending up with "ghost" <li> elements left behind, items jump around the screen when dragged out of their containers...
Is there a pre-build component out there somewhere? I can easily provide a full list of <li> elements with unique id attributes for the staff list and another for the department list.
Thanks in advance, and apologies for the massive question, I couldn't think of a better way of explaining myself.