Starting Dojo Drag and Drop

Last night I began creating a lineup edit page. I’m hoping to use Dojo’s drag-and-drop functionality to make creating each week’s song lineup very easy:

On the left side I will display a list of song positions and names (Intro, 1st congregational, offertory, etc). Next to each item will be the song name.

On the right side I will display all of the songs in the database, and a link to add a new song.

The user will then drag songs from the list on the left onto the lineup position. Any positions not needed can be dragged out of the list, and will appear at the bottom in an ‘unused’ section. They can thus be dragged back if needed. Individual items can be dragged to rearrange the order.

The list of songs will include an MP3 link to allow previewing the song.

Last night I added the code for the lists, and a few lines of Dojo to enable dnd and the result was immediately impressive. With just a few additional statements added to the lists, I can now drag between the lists and within the lists to reorder.

I found a very helpful link which I’m working through:

I’ll need to clean up the way it works though. I don’t want the songs to be removed from the song list when dragged onto the lineup. Sometimes the same song may be played twice. There is also some formatting problems due to different columns being displayed in the lineup and songs lists (tables). And there is no functionality yet. DND operations modify the appearance of the form, but don’t get written to the DB yet.