[Request] SortableJS + VueDraggable

Ask us anything
, , ,
1

Hello!

I know we have several topics covering draggable elements, whether kanban or lists, but I want to request something more complete for the community:

Analyzing VUEDRAGGABLE and SORTABLEJS, they have all the necessary properties to carry out ANY type of manipulation of draggable elements, whether table, list, double lists, nested lists… in short, countless possibilities.

My request is to implement a group of draggable elements and sort them in the list of elements all within “draggable”.

Even though we don’t currently have anything like this available, could you help me on how to enable (at least HANDLE) via NPM?

LINK EXAMPLE

Thank you in advance for the opportunity to suggest something!

2

This is currently possible (the link you posted)

1 Like
3

Hi, our kanban and stack element are implementing this library, did you try to play with it ? Pretty sure you can achieve a lot with this already

1 Like
4

Hi @Alexis !

Yes, I’m trying exhaustively to mess with them, but my difficulty is creating something like vuedraggable(“handle list”). It would be a combination of our DataGrid and Stackable elements…

Currently I can’t use the input features in a dynamic list (when I load a collection, for example - I already opened an old topic about this). And this issue about dynamic list input is not just about draggables. It also occurs in the static list.

In the example link above is my goal:

  1. the element that releases the draggable element is just an icon, where I can sort it;
  2. Have an input field with “inline” editing.

I know that existing tools already have great features. I just thought we could have more possibilities to delight and facilitate the operation of our end customers.

About NPM, it’s because I’m a complete “No-Coder” hahaha so I don’t really know how to work with it!

I appreciate everyone’s attention!

5

It is all possible. Check this out.
I’m using components for each line, and handling all the updates inside the components, that will fix your problems with using input features.


Portal | Ernestus - 20 August 2024 - Watch Video

2 Likes
6

Wow, @thomlov !

This is excellent! :partying_face:

According to what I said, the line is a component with several inputs and buttons. This component is inside a draggable list or a Kanban…

Thank you so much for the help!

PS: Can I call you privately if I have any further questions?

7

You can just ask in this thread, and me or others will help you.

It’s better to share the knowledge and solutions so others also can learn from it :+1: :+1:

2 Likes
8

Hello again…

I made progress in creating this element, but I’m having difficulty updating the input value:

  • I created the input component, which has the properties “Type”, “Key” and “Value”.

  • When I place this component in the Reorder List, the input value only updates in the first line. I imagine that when the input is modified (on change), it should update some variable within the component, but it doesn’t happen…

Follow video

I would appreciate it if you could elaborate a little on this component…

PS.: I tried to create 2 components: one that is the entire line, placing the inputs inside the “div”… and another with just the input and the line I made it separate in the Reorder List…

9

It’s because you have selected the top component before going to preview mode.
The variable actually changes, but you see the logs and variables from the top component because that is the selected one.

Try editing component number 3, and do the same.

1 Like