Vue.draggable: work with virtual list

[Leadaxe]

Привет! Правильно ли я понимаю, что можно создать тикет на русском?
Мы используем https://github.com/tangbc/vue-virtual-scroll-list
и хотим сделать список сортируемым. Суть в том, что он динамически прячет и показывает элементы в DOM и иногда даже их не пересоздает, а использует существующие.
Как нам лучше всего подружить эти два компонента?

[David-Desmaisons]

Hello @Leadaxe, sorry I don`t understand russian. From what I got from google translate, you want to integrate https://github.com/tangbc/vue-virtual-scroll-list and vue.draggable.

From what I saw, out-of-the box both components will not work together. I guess the best solution should be write a new component with virtual and d-n-d capability.

[David-Desmaisons]

To complete my first answer:

What vue-virtual-scroll-list does:
-it tracks scroll events to add to virtual DOM only visible slots

What vue-draggable does:
-it maps relashionship between vdom slots and dom element
-it let sortable deals with draggable dom update and events
-when d-n-d is ended it undo DOM updates, update arrays based on sortbale.js event and mapping between slots and dom element and let vue.js re-render

So basically what you need to is to create a component that will do both. Attention points:

• The computation of the mapping between vdom slots and dom element should take into account current offset due to vue-virtual-scroll-list
• When sortable.js is in charge of scrolling, it will trigger DOM updates via vue-virtual-scroll-list, this may not be supported well by sortable.js.

In sum-up, there should be way of mix-in up both behaviour but not by "mixin" component but writing a new one.

[p-baleine]

@Leadaxe

I created a Vue component which combines SortableJS/Vue.Draggable and tangbc/vue-virtual-scroll-list together, although this issue was very old.

https://github.com/p-baleine/vue-draggable-virtual-scroll-list

Anyway, I am profoundly grateful to both of these awesome libraries!