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.