PHP jQuery Draggable List Creation with Audio

I have somewhat of a unique project I need help on. You can see a quick example here: [login to view URL] (but i need 4 total categories and drag&drop instead of listbox) The backend will have 5 folders in the DocumentRoot, 4 folders will be named "cat1, cat2, cat3, and cat4" the 5th folder will be named "mixes". In each of the "cat" folders will be some .mp3 files. What I'm envisioning is I can place some mp3 files in each folder, PHP will list them in a draggable list on the front end with a play icon next to each list item so someone can click and hear what that file sounds like. The names of each file in the list for each category can be something temporary for now (maybe Option 1, Option 2, etc...) Finally we'll need a drop zone so a user can drag and drop 1 option from each Category to build a "custom" final audio mix (in reality, all the possible combinations will be pre-made). Once a user drags and drops their choices from each category, the dropzone turns green and a button appears that says "Hear It' or something. They click on the button to hear their final "custom" mix (which will be pulled from the "mixes" folder in the DocRoot) in an html5 audio player. I'm open to suggestions for how to best execute this project and make it easy to update/add/delete the audio files on the frontend. I'm hoping to have this written so no code is required to be edited to add/delete/change the audio files. Also would like to make it easy to add or delete categories. I hope I'm explaining this well, please reach out of you need some more direction or questions on anything.