drag sortable lists items to another div

204 Views Asked by At

I'm building a "project" for school in php and i'm here because i'm having some issues. I'll explain:

I have 4 lists of items , each one is associated with a class (that the user chose in a configuration page) which are saved in a database.
Inside each list are listed the students belonging to each class. Using the sortable jquery method i was able to make it so that i can drag a student from a class to another, that i was able to do and is working as intended.

I was satisfied with what i had so far (since this is the first time i've done something similar). However, my teacher asked me to put below those 4 lists the rest of the classes in divs or something so i could move a student from each of the 4 "important" classes listed above to one of those "lets call it other classes" making the student change class (change a field in the table students via ajax or smthing) and make it disappear from the page.

I dont know if i made myself clear because my english is not that good but i'll try to make an example.

Let's say i had 7 classes in my database. (A, B, C, D, E, F, G) and i had defined that the "main" ones are A, B, C and D. Those main classes would be in the lists at the top and the other 3 would be below the lists (the difference is that they wouldnt be lists, so they wouldnt show the associated students and if a dragged a student from any of the main lists there). Now there's the important part
Lets say i drag a student from List 1 (class A) to the div below that corresponds to class E, it would change the students class to E and it would remove it from the page, or hide it, since it doesnt belong to any of the big classes anymore. This is what i cant figure out how to do

Image to help understand: http://tinypic.com/view.php?pic=mtb96s&s=8#.VYP00PlVhBc

Image link2: http://prntscr.com/7irm41

Does anyone have suggestions of how i could achieve this? I can post some code so let me know if i need to

2

There are 2 best solutions below

0
On

In the query, you can use ORDER BY for the ordnung of the elements.

0
On

Figured it out!

Used the draggable!
https://jqueryui.com/draggable/