Component that allows to change order of its children components by drag and drop

Hi !
Is there any way in Anvil to make something drag-and-dropable in the UI ?
Basically my problem is the following :
I have a list of tasks (just strings of texts in my database). I would like the user to be able to select a subset of those tasks and order them. Then I could get those tasks in order back in a list variable.

I’ve thought of two different approaches :
First one : Start with one dropdown and hen the user select a task in it, dynamically create a copy of the dropdown for the user to select a second task and so one.

Second one : Same dropdown, but when a value is selected, it gets added as a row in a table next to the dropdown.

In both cases, I want the dropdowns/table rows to be movable so that they can be ordered.

If anyone can help with this :slight_smile:

Hi Welcome to anvil! :wave:

A search in the search bar for “Drag and Drop” found this forum post as the top result:

It is pretty complicated and might not be beginner friendly, but someone towards the bottom of the thread someone asked about using it for repeating panels instead of cards.
If you are new to anvil, you might need to learn some more about how components work if you want to use this.
If you have been using anvil for a while, it should be much easier to use, and even contains a clone link.

Yes, I tried this code. It works, but if I drop the item outside of the drop zone, it gets destroyed.

Beside the drag and drop solution, I see an other one :
A dropdown with the list of tasks. When the user chooses one, it creates a duplicate of the dropdown just under the first one for the user to select a second task, and so on … There we have an “order” and if the user changes his mind and wants to set the third task he selected as the first one, he just change the value selected in the first dropdown for the third task.
I am new to Anvil, is that something I could do ?