Sortable Virtual Scrolling List Component For Vue

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.4 (07/02/2023)

• Add an option pageMode
• Bugfix

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