Creating Custom Chord Chart Widget – Need Breakdown of Tasks Involved

I’m looking into creating a custom WordPress widget for my site, and have a list of things that must be accomplished in terms of functionality. I’ll start by saying that I realize this is no simple undertaking, but I have time to invest in this and will likely seek outside help as needed.

In short, I am looking to create a widget that operates similarly to what is seen on ultimate-guitar.com – I would like to have a personal collection of chord charts for songs.

From the backend, I would like to be able to create a song and populate it with the chords and lyrics (with each verse, chorus, bridge, etc. separated into a distinct component). Where it gets slightly more complex is that I want these chord charts to be customizable, in that from the front end the user will be able to drag and drop each verse, chorus, bridge, etc. into a large, blank body so that they can choose which components to choose and in which order to have them displayed. (I envision the moving of each component to operate the same as moving the widgets on the WordPress dashboard).

Once the user has dragged the components of the song into the main body, I would like the ability to transpose the chords (located directly above the lyrics) up or down. This functionality can be seen on the chord charts on ultimate-guitar.com. After transposing to the desired key, the user will have the option to print the customized chord chart.

Finally, as if my list of features isn’t long enough, I want the database of songs to be searchable or browsable. I’ve included a very rough sketch from my iPad of how I picture the front end to look. Draft

Based on the above functionalities, can someone please help me out by possibly breaking down the necessary parts that will be coded and explaining how this can be accomplished? Thanks in advance!