A virtual scrolling list component that can be sorted by dragging
For Vue 3 support, see here
npm i vue-virtual-draglist
Root component:
<template>
<div>
<!--
:handle="'I'" // use tagName
:handle="'.handle'" // use class
:handle="'#handle'" // use id
-->
<virtual-list
v-model="list"
:data-key="'id'"
:handle="'.handle'"
@top="toTop"
@bottom="toBottom"
@drag="onDrag"
@drop="onDrop"
@add="onAdd"
@remove="onRemove"
>
<template slot="item" slot-scope="{ record, index, dataKey }">
<i class="handle">{{ record.id }}</span>
{{ record.text }}
</template>
<template slot="header">
<div class="loading">top loading...</div>
</template>
<template slot="footer">
<div class="loading">bottom loading...</div>
</template>
</virtual-list>
</div>
</template>
<script>
import virtualList from 'vue-virtual-draglist';
export default {
name: 'root',
components: { virtualList },
data () {
return {
list: [{ id: '1', text: 'a' }, { id: '2', text: 'b' }, ...];
}
},
methods: {
toTop() {
// code here
},
toBottom() {
// code here
},
onDrag({ item, key, index }) {
// code here
},
onDrop(params) {
if (params.changed) {
// list item position changed
}
},
onAdd({ item, key, index }) {
// code here
},
onRemove({ item, key, index }) {
// code here
}
}
}
</script>
Emit | Description |
---|---|
top |
scrolled to top |
bottom |
scrolled to bottom |
drag |
drag is started |
drop |
drag is completed |
add |
element is dropped into the list from another |
remove |
element is removed from the list into another |
Prop | Type | Description |
---|---|---|
data-key |
String | The unique identifier of each piece of data, in the form of 'a.b.c'
|
data-source |
Array | The data that needs to be rendered |
Commonly used
Prop | Type | Default | Description |
---|---|---|---|
keeps |
Number |
30 |
The number of lines rendered by the virtual scroll |
size |
Number |
- |
The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated |
handle |
Function/String |
- |
Drag handle selector within list items |
group |
Function/String |
- |
string: 'name' or object: { name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }
|
keepOffset |
Boolean |
false |
When scrolling up to load data, keep the same offset as the previous scroll |
direction |
vertical | horizontal |
vertical |
Scroll direction |
scroller |
Document | HTMLElement |
- |
Virtual list scrolling element |
lockAxis |
x | y |
- |
Axis on which dragging will be locked |
debounceTime |
Number |
0 |
debounce time on scroll |
throttleTime |
Number |
0 |
throttle time on scroll |
Uncommonly used
Prop | Type | Default | Description |
---|---|---|---|
draggable |
String |
- |
Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged |
disabled |
Boolean |
false |
Disables the sortable if set to true |
animation |
Number |
150 |
Animation speed moving items when sorting |
autoScroll |
Boolean |
true |
Automatic scrolling when moving to the edge of the container |
scrollThreshold |
Number |
55 |
Threshold to trigger autoscroll |
delay |
Number |
0 |
Time in milliseconds to define when the sorting should start |
delayOnTouchOnly |
Boolean |
false |
Only delay on press if user is using touch |
fallbackOnBody |
Boolean |
false |
Appends the ghost element into the document's body |
rootTag |
String |
div |
Label type for root element |
wrapTag |
String |
div |
Label type for list wrap element |
itemTag |
String |
div |
Label type for list item element |
wrapClass |
String |
'' |
List wrapper element class |
wrapStyle |
Object |
{} |
List wrapper element style |
itemClass |
String |
'' |
List item element class |
itemStyle |
Object |
{} |
List item element style |
ghostClass |
String |
'' |
The class of the mask element when dragging |
ghostStyle |
Object |
{} |
The style of the mask element when dragging |
chosenClass |
String |
'' |
The class of the selected element when dragging |
Use ref
to get the method inside the component
Method | Description |
---|---|
getSize(key) |
Get the size of the current item by unique key value |
getOffset() |
Get the current scroll height |
getClientSize() |
Get wrapper element client viewport size (width or height) |
getScrollSize() |
Get all scroll size (scrollHeight or scrollWidth) |
scrollToTop() |
Scroll to top of list |
scrollToBottom() |
Scroll to bottom of list |
scrollToKey(key) |
Scroll to the specified data-key position |
scrollToIndex(index) |
Scroll to the specified index position |
scrollToOffset(offset) |
Scroll to the specified offset |