Costume Components - Draggable List

At the moment everything is error free. I would be very happy if you share your findings, if you have a solution :wink:

Hey Broberto,

do you think it would be possible for you to send me your code as a repository? I would like to take a look at it to see if it might help me progress. I have the issue that I want to code a sort of Kanban board with Vue Draggable, and your code could possibly show me how to properly bind the data from weweb. I would greatly appreciate it if you could provide me with some insight! :slight_smile:

Can you DM me please? Iā€™ll send it to you asap, but now Iā€™m away

Hello!

I know this topic is not very busy, but I need a draggable list at the moment and the lack of an element that allows this configuration has left me a little frustrated.

Instead of creating an entire process via code, wouldnā€™t it be easier for Weweb developers to create boolean options for ā€œdragable elementā€ and ā€œdroppable elementā€ in the div element? And when this attribute is marked as ā€œtrueā€, in the Workflow options, ā€œondragstartā€ or ā€œondragendā€ appears? Better, in the ā€œListā€ element, make the draggable and droppable options available in the options?

Obviously, we can put this ā€œattributeā€ in the settings, but this space can be explored for other situations, since practically all user experience best practices will, at some point, deal with dragging and dropping elements!

Example: https://www.w3schools.com/html/html5_draganddrop.asp

PS.: At the time of this reply, I just configured a div as draggable.

@Joyce @aurelie

Captura de tela 2023-12-15 102643



Imagem1

Did you try the stack element?

1 Like

No. :grimacing:

In fact, I was unaware of its practical function (perhaps the name in English didnā€™t make it easier for me to understand). :brazil:

Iā€™ll use it and post the answer.

Thanks in advance! :v:

Yep, use stack element for this. If youā€™re not able to get what you need, you can take the element from github and fork it yourself.

1 Like

Excellent!

The Stack element works great! :trophy:

Now I need to learn how to create workflows (I want to create a menu tree with hierarchy, like Windows Explorer)ā€¦

Thanks!

2 Likes

Hi!

Someone can help me?

I wanted to use a draggable list (whether or not using the Stackable element), but for the list of items to be horizontal (imagine the Columns element, but for it to be draggable)ā€¦

The Stackable element does not have the option to place items arranged horizontally. If I place a Collection List inside the Stackable Items part, the result repeats all items in all lists.

I believe that if the Stackable element itself had the items arranged horizontally, it would be great. My ultimate goal is to have a single 3x3 matrix where I can drag objects between them.

There must be some way to do this, but I canā€™t seem to succeed in this mission. :melting_face:

Have you been successful in enabling/disabling specific columns from being draggable?

In my case I want to disable draggable on a specific column.