How to impement a drag and drop? Any hints or ideas?

fdoolivares

Hi,

I'm currently trying to implement a drag and drop feature where my intention is to give users the ability to define a new order (other than default) to a set of elements…

For more context:

1. Items are coming from another table, and can come in: Multiple items in a bulk or as single items. Items can be added and removed multiple times.
2. Default sorting is defined by an increasing criteria, in this case "ID".
3. New sorting must be applied only when dragging and dropping.
4. If there's new added items after doing a drag and drop, these must fall into the last items of the list.
5. Dragging and dropping of any item in the list must define a new global sorting for all the list.

I'm currently working with Bravo Studio for the frontend.

Any clues on how to do this? I've never done it, so it is being quite complex to figure it out.

Any help highly appreciated.

Thanks!

arturosanz

Add a integer field to track the true order. By default it will be the same as ID but multiplied by, let's say, 100 (or more if you need to). Doing so you will have enough space between each pair of items to insert other items when dragging and dropping.

When the user drags and drops an item, simply change the true order field value with the average of the two values of the items in between. For instance, if item A has a true order value of 300 and item B has a true order value of 400, and the user wants to place item C in between A and B, then update item C's true order value to the average of 300 and 400 which is (300+400)/2=350.

If you want, you could also launch a background task periodically to renumber the true order field reseting the values to a 100 distance in between.