Deviopath › React

Reorderable Playlist

Hard · Lists

Build a playlist that can be reordered while a song plays.

Render SONGS inside <ul className="playlist"> as <li data-title="..."> items. Each <li> has <span className="title"> and the buttons "Move up" (disabled on the first row) and "Move down" (disabled on the last row).

Below the list show <p className="now-playing">Now playing: Blue Sky</p> and the buttons "Previous" and "Next". The first song plays at the start, and the <li> of the playing song has the class playing.

- Moving songs changes the order but not the playing song: playback follows the song, not its position.

- "Next" and "Previous" go to the neighbouring song in the current order. "Previous" is disabled on the first song and "Next" on the last.

Next: Sortable Table