How it's work with nested items?

[Leadaxe]

I would like to do something like that:

<virtualList :size="50" :remain="20">
	<draggable v-model="items" @start="drag=true" @end="drag=false">
		<item v-for="(item, index) of items" :item="item" :key="item.id" :index="index"/>
	</draggable>
</virtualList>

how can i do that? help me plz

[Leadaxe]

i have fork this one for some experiments, you can follow it https://github.com/Leadaxe/vue-virtual-scroll-list/blob/master/src/index.js

[tangbc]

@Leadaxe I think that the list <item/> better be put in <virtualList/> inside directly. I mean, do not use with nested <item/>. If you really need wrap <item/> by another component, consider handle it inside each <item/>.

For your issue example, you want to use <vuedraggable/> to drag and sort list, why not consider use sortablejs instead of <vuedraggable/>, handling darg and update data by yourself ?

I've seen the sortablejs's documentation, I think your example maybe can implement by this way:

<template>
	<virtualList ref="vlist" :size="50" :remain="20">
		<item v-for="(item, index) of items"
			:item="item"
			:key="item.id"
			:index="index"
		/>
	</virtualList>
</template>

<script>
	import item from '../item.vue';
	import sortable from 'sortablejs';
	import virtualList from 'vue-virtual-scroll-list';

	export default {
		name: 'test',
		data () {
			return {
				items: [...]
			}
		},
		mounted () {
			let listEl = this.$refs.vlist.$el.firstElementChild;

			// update items order.
			sortable.create(listEl, {
				onSort: (evt) => {
					let { newIndex, oldIndex } = evt;
					let newVal = this.items[newIndex];
					let oldVal = this.items[oldIndex];

					this.items.splice(newIndex, 1, oldVal);
					this.items.splice(oldIndex, 1, newVal);
				}
			});
		}
	}
</script>

Or you have other idea, hope to share with me.

[Leadaxe]

I think about this approach

let newVal = this.items[newIndex];

But will be index only of visible elements, that is true?

You logic work with vue slots and it work very good. But if you can refactor you code for work with somethink like that

<virtualList  :items = items  

in this case we can used nested component like we use it in another components like vuedraggable. if it possible, it will be good

[tangbc]

@Leadaxe

The newIndex is not only of visible elements, it's all. For example, if 1000 data all and visible 10 items, inside <virtualList/> compoent, there is also 1000 <item/> component instances, but just 10 <item/>s are rendered. So items always be full data, newIndex is always the index of full data.

In my original intention, <virtualList/>'s main duty is just filtering slots and render right items in visible viewport. And <virtualList/> does not care about what <item/> component is and how items data change. That's clear and easy to use, right ?

[Neicul123]

Hi @tangbc
While trying to implement your example, it seems that the index being returned by sortablejs actually isn't the index of the item in the full array, but the index of the item in the list of currently visible elements.

Perhaps things have changed since then? Any idea on how to get either vuedraggable or sortablejs to work with virtualList?

[p-baleine]

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 your awesome libraries!

[tangbc]

Now 2.0 doesn't use nest item, is there still has problem when handling drag inside item component?

[p-baleine]

is there still has problem when handling drag inside item component?

There are no problems if I handle dragging and updating of data on a single list. The following is an example that uses v2.0 and is based on your example which uses SortableJS/Sortable.

But, in addition to handling dragging of data on a single list, I want to handle dragging of data between multiple lists and it is obviously not so simple with vue-virtual-scroll-list and Sortable.

vuedraggable supports dragging between multiple lists. I think that, if I want the dragging feature that supports multiple virtual-list, it is preferable to use vuedraggable instead of implementing such features by myself, due to the popularity and the stability of vuedraggable. So I created vue-draggable-virtual-scroll-list.

---

• [1]: The example code is here: https://gist.github.com/p-baleine/cff605e3e5f686fe40f7daeca3200398