Taylor here, and I have a challenge for you. I’m trying to build a site which has an ordered list, based off a firebase “order” value in a collection. (Imagine a Firebase collections query like this:
orderBy("order","asc")) which is then re-orderable with some ‘up’ and ‘down’ arrows on each list item.
I’ve put together a simple mockup here: https://neonto.cloud/u/listorderchallenge
It’s based on the chatroom demo. If you look at the list of chatrooms, you will see they are named “one” through “six” and their order is in a field to the left of some arrows that should move them up one or down one. If the order gets messed up, you can click on the order number and reset it manually using the disk icon to save.
Right now it just increments or decrements the order number by one. What I would like it to do is to then modify the list item above or below it and decrement or increment it accordingly so the values swap and the list reorders nicely.
If you would like to see the project file I’ve started with, it’s available here.
I would love to see if anyone can solve this before I can. I would also love to know alternate methods for something similar, and ideally, a solution that can allow for more than just single moves up or down, as I would like to implement a Trello-like drag and drop reordering solution if possible, like this: https://snack.expo.io/SkVLU4y8I.
Additional points if you just build a Trello clone entirely with React Studio…
Anyone interested? Please share your solutions, including screenshots, scripts, or even a working project file.