research: how to allow a drag and drop area for /collection route ✍️

[sheleoni]

research what libraries also try to learn how drag and drop works in vanilla JS

Steps

• just drag a statically-rendered image to dump area, while setting no additional limits of the dump area (as long as the image is somehow intersecting with the dump area, add a console.log some UI text to say "ice-cream" in area!). no need to count how many ice-cream images are in the dump area. just make dragging work in a minimal way.

Possible difficulties

• when you drag the ice-cream away from the list, I guess it might break the rendered list of ice creams and cause some kind of rendering error? (maybe you need to delete from the list??)
• catering to touch device (iPad etc) drag and drop

Documenting the possible libraries / drag and drop approaches in the comments

[sheleoni]

basic drag and drop done at https://github.com/sheleoni/icecream-kana-game/pull/84

[sheleoni]

multiple drag and drop done at https://github.com/sheleoni/icecream-kana-game/pull/85

maybe the next step is to attach the object _id to the iceCream collection array and delete it from the iceCreamCollection array when the user has dragged it in to the dump. Or, without the _id, just identify the ice-cream by its name property and delete the corresponding quantity from the iceCreamCollection after dragging into drag area and pressing some form of submit