mfuu / vue-virtual-drag-list

A virtual scrolling list component that can be sorted by dragging
https://mfuu.github.io/vue-virtual-drag-list/
MIT License
35 stars 12 forks source link

can I drag-drop an item between two lists? #9

Open m4m205 opened 1 year ago

m4m205 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

mfuu commented 1 year ago

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

m4m205 commented 1 year ago

@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 commented 1 year ago

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

mfuu commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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'" >

` 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 image

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 image

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