This is a virtual scrolling list component that can be sorted by dragging an item in the list (drag and drop sorting) and the individual items can have custom styles.
How to use it:
1. Import and register the component.
import virtualDragList from 'vue-virtual-draglist'
export default { // ... components: { virtualDragList }, // ... }
2. Add the virtual-drag-list
component to the template and define the data list.
dataSource: { type: Array, default: () => [], }, dataKey: { type: String, required: true, }, direction: { type: String, default: 'vertical', }, keeps: { type: Number, default: 30, }, size: { type: Number, }, draggable: { type: [Function, String], }, handle: { type: [Function, String], }, group: { type: [String, Object], }, delay: { type: Number, default: 0, }, animation: { type: Number, default: 150, }, autoScroll: { type: Boolean, default: true, }, scrollThreshold: { type: Number, default: 55, }, keepOffset: { type: Boolean, default: false, }, disabled: { type: Boolean, default: false, }, fallbackOnBody: { type: Boolean, default: false, }, pressDelay: { type: Number, default: 0, }, pressDelayOnTouchOnly: { type: Boolean, default: false, }, rootTag: { type: String, default: 'div', }, wrapTag: { type: String, default: 'div', }, headerTag: { type: String, default: 'div', }, footerTag: { type: String, default: 'div', }, itemTag: { type: String, default: 'div', }, wrapClass: { type: String, default: '', }, wrapStyle: { type: Object, }, itemStyle: { type: Object, }, itemClass: { type: String, default: '', }, ghostClass: { type: String, default: '', }, ghostStyle: { type: Object, default: () => ({}), }, chosenClass: { type: String, default: '', }, };
5. API methods.
// on dragEnd ondragend(list, old, new, changed) { ... }; ondragstart(list, from, node) { ... }; // scroll to bottom scrollToBottom(); // scroll to top scrollToTop(); // scroll to a specific item scrollToIndex(index); // scroll to a specific position scrollToOffset(offset); // get height of the current item getSize(dataKey); // get offset of the list getOffset(); // reset reset();
Preview:
Changelog:
v3.1.3 (05/18/2023)
- Add props: fallbackOnBody, pressDelay, pressDelayOnTouchOnly
v3.1.2 (05/14/2023)
- Fix touch error
- Allow to scroll in any scroller
v3.1.0 (04/27/2023)
- Added more props and events.
- Bugfixes
v2.7.0 (04/22/2023)
- Added more props and events.
v2.6.17 (02/26/2023)
- Update
v3.0.0 (07/26/2022)
- vue3 support
v2.6.15 (06/14/2022)
- Fix bug that the list is empty when the data is re-rendered after the data is cleared
v2.6.14 (06/10/2022)
- Bugfix
v2.6.13 (06/09/2022)
- Bugfix
v2.6.12 (06/09/2022)
- Bugfix
- Add emits ondragstart, add props keepOffset
v2.6.11 (06/01/2022)
- Add props: autoScroll, scrollStep, scrollThreshold
- Optimized initialization logic
v2.6.9 (05/26/2022)
- Delete props height, rootClass, rootStyle
- Fix the height change of the list after drop
- Fix the animation disappears when dragging and the element disappears after drop
- Fix the problem of error when loading data asynchronously
v2.6.5 (05/22/2022)
- Fix props error
- Fix bug that ondragend function emit error
- Fix the problem that dataKey cannot find the value from number type to string type
05/21/2022
- v2.6.3: Bugfix
Download Details:
Author: mfuu
Live Demo: https://mfuu.github.io/vue-virtual-drag-list/
Download Link: https://github.com/mfuu/vue-virtual-drag-list/archive/refs/heads/main.zip
Official Website: https://github.com/mfuu/vue-virtual-drag-list
Install & Download:
# Yarn
$ yarn add vue-virtual-draglist
# NPM
$ npm i vue-virtual-draglist