can I drag-drop an item between two lists?

[m4m205]

Hello mfuu,
thank you for this great library!

is it possible to drag-drop an item between two lists?

please note that the lists I have they load more content for API when reach the bottom of the already loaded lists.

if you think that possible then I will spend my time on that to make it work (any advise is highly appreciated )

if you think that is not possible then just let me know please.

[mfuu]

That's exactly what I'm doing right now. And I'm currently rewriting the drag section and will update this issue when I'm done

[RoyVeldman]

Hi @mfuu do you have an estimation of when this feature will be ready I am waiting for it too, would be awesome

[mfuu]

@RoyVeldman @m4m205
Sorry to reply so late, please update to the latest version to support this iuuse. Thank you for your patience

[m4m205]

@mfuu great news!!

thank you very much
I am going on vacation for a month.
I will use in the project I am working on once I come back.

[isavvaidis]

Hi @mfuu
Any news about the issue?
We are going to use it on our project. Its awesome 👍

[mfuu]

Hi @mfuu
Any news about the issue?
We are going to use it on our project. Its awesome 👍

Of course you can, this feature is already supported after version 2.7.x

[isavvaidis]

Hi @mfuu
Any news about the issue?
We are going to use it on our project. Its awesome 👍

Of course you can, this feature is already supported after version 2.7.x

Thanks for the reply.
Here is what we want to do:

We want to create a horizontal scrollable calendar list. Each list must be a vertical scrollable list with items.
These items may be 0 or 50 or more than 1000. We want to be able to change the sorting of the items in a day (vertical draggable) and also to change an item from one day to another (horizontal draggable).

We also want to use a virtual list for each day to improve performance due to the size of the items per day.
We searched a lot for a tool that matches our needs, and we found your tool.
We have used vue-virtual-drag-list (vue version 2 and 3) but we experience some issues.

One issue is that when we move one item from one day to another, the vue array (data source) does not change. The item continues to be in the old day, although visually the change appears to have been made
Another issue is that the drop event is fired twice when I move one item from one day to another.

[mfuu]

continues to be in the old day, although visually the change appears to have been made

The first issue can you provide sample code if possible?
The scond issue is that because each list is independent, both lists will trigger a drop event when dragging and dropping from one list to the other is complete

[matoulas]

continues to be in the old day, although visually the change appears to have been made

The first issue can you provide sample code if possible? The scond issue is that because each list is independent, both lists will trigger a drop event when dragging and dropping from one list to the other is complete

Hello.

I am 'isavvaidis' colleague.
Here is our sample code for the first issue

<VirtualList :dataKey="'id'" :dataSource="productionData" style="height: 500px;" @drop="drop($event)" :group="'workorderLines'" > <template v-slot:item="{ record, index, dataKey }"> <span>{{ record.id }}</span> </template> </VirtualList>

We have add this drop event.

drop(event) {
console.log(this.productionData[0][0].id);
},

this first item id of the first list is always the same
even when we move it from the first list to the second

[isavvaidis]

continues to be in the old day, although visually the change appears to have been made

The first issue can you provide sample code if possible? The scond issue is that because each list is independent, both lists will trigger a drop event when dragging and dropping from one list to the other is complete

Hi mfuu

Any news about the above code that my colleague send?
Thanks and appreciate

[mfuu]

Sorry for the late reply. If two lists are next to each other, try giving them a margin spacing, which may be caused by this. If yes, I'll think back to fix it.

[m4m205]

Hi mfuu

thank you again for your great work.

I want to implement your library in vuetify v-data-table
so I need to pass to the body slot html looks like

but your library it returned 3 nested levels (rootTag, wrapTag, itemTag)
I tried to pass "template" to rootTag, and wrapTag but still that will break the

structure.

so this code below will break the table

you do have any idea or example how to use your library in html