I've managed to piece together most of the code, but I'm having a few issues that I can't seem to get working smoothly: -
In the "Selected DVD's" area, I need to be able to change the order of these DVDs in this list only. For example, I want to change the order from 1,2,3 to 3,1,2.
Items in the "Un-selected" area won't drag up into the selected dvds area
If I click on the link at the top "add all unselected dvd's" and then click on the link "Remove all selected DVDs", it doesn't add them into the correct area at the bottom. However, if you click the "Remove all selected DVDs" link first, it works.
Following #3, if I then add a new DVD at the top right, sometimes it adds loads of the same DVD?
Here is a functioning demo of what I have completed so far: http://jsfiddle.net/BFWzS/1/
There is more code available in the fiddle above ^
// Let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // Clicking an icon won't initiate dragging
revert: "invalid", // When not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// Let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});
Hopefully, someone can assist us with this issue,
Cheers