Comments (8)
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
from vue-virtual-scroll-list.
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!
from vue-virtual-scroll-list.
@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.
from vue-virtual-scroll-list.
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
from vue-virtual-scroll-list.
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 ?
from vue-virtual-scroll-list.
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?
from vue-virtual-scroll-list.
Now 2.0 doesn't use nest item, is there still has problem when handling drag inside item component?
from vue-virtual-scroll-list.
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
from vue-virtual-scroll-list.
Related Issues (20)
- Typo error in live demo -> chat room file
- 建议支持skeleton加载骨架屏来代替原有的不渲染部分,这样当滚动过快时,白屏也就替换为了加载屏 HOT 2
- 我有一个好友列表(list)。因为我不确定哪个好友来信息需要增加提示(item)。于是我想通过index来快速匹配list中的item 但是我发现index是根据渲染个数输出的。怎么能更好的解决这个问题。我不想遍历这个集合。因为这个集合数据量大。
- 增加一个根据dataSources中的dataKey获取当前list索引的方法。
- 不定高度的虚拟列表 HOT 1
- Nested virtual lists
- Project maintenance status
- 低版本浏览器兼容问题 HOT 1
- 是否考虑对树形数据结构进行支持 HOT 1
- 是否有意愿增加 滚动条当前滚动到的节点 公共函数 HOT 1
- 激活285,虚拟列表追加数据后,获取高度错误
- How to Smooth scroll an item into view HOT 1
- How to "wait" for scrollToIndex to finish?
- How to get first and last visible item in the virtual list
- 群聊案例置顶以后不会保持当前位置怎么解决
- 组件库多版本共存会出现相互覆盖
- Add Typescript support please, it's 2024 already. HOT 1
- [Bug Report] The "tobottom" event did not trigger as expected on ”page-mode
- [Bug Report] The "tobottom" event did not trigger as expected on "page-mode"
- CDN方式引入方式及使用方法
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-virtual-scroll-list.