Nice job! Some feedback:
- Add a toggle that automatically plays the chord when you request a new one
- Consider getting a simple soundfont (guitar, piano) - it'll make the previews/playback a bit more natural sounding
I especially love it because it leaves open the possibility of interacting with the rest of the screen while an element is picked. Eg you could navigate a directory tree while finding the right place to put a file. Though I guess it’s similar to cut/paste in that respect.
As some others have mentioned, the picked state needs to be a bit more clear.
Some suggestions -
1. As a border around 'Pick' to indicate it as an action
2. Once an item is picked, add a mask on the whole page, with only the picked item in front of the mask. (This is going to be a bit challenging, I'm guessing, to show the gaps between the items as you scroll)
3. Once an item is picked, the 'Cancel' and 'Place' bar should have a background. Sometimes this overlaps the list and is not clearly visible.
4. It should not be possible to scroll way above or below the list.
5. On 'Cancel' scroll back to the item.
Again, congratulations! It's one thing to think of something, quite another to be able to implement it nicely.
For number 2, that should be possible, since I have the position of each item in the list (and the position of the list itself. Using a <canvas> might be the way to go.
For number 4, my main concern would be that it would feel like "scroll-hijacking". What I did however is prevent the picked item from going beyond the list, in both directions.
Number 5 is a good idea as well, easy to implement.
OR possibly highlighting the spots between rows either with a line, or "place"
i think that's a much more intuitive & reliable ui, and would be an improvement on drag n drop. or a supplement to it
Deleted Comment
Linked in page is 404.