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.

<virtual-drag-list
  :data-key="'id'"
  :data-source="list"
  :draggable="'.drag'"
  @top="handleToTop"
  @bottom="handleToBottom"
  @ondragend="ondragend"
>
  <template slot="item" slot-scope="{ record, index, dataKey }">
    <span class="drag">{{ 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-drag-list>
dataSource: {
  type: Array,
  default: () => {
    return []
  }
},
dataKey: {
  type: String,
  required: true
},
direction: {
  type: String,
  default: 'vertical'
},
keeps: {
  type: Number,
  default: 30
},
size: {
  type: Number
},
delay: {
  type: Number,
  default: 10
},
rootTag: {
  type: String,
  default: 'div'
},
wrapTag: {
  type: String,
  default: 'div'
},
wrapClass: {
  type: String,
  default: ''
},
wrapStyle: {
  type: Object
},
headerTag: {
  type: String,
  default: 'div'
},
footerTag: {
  type: String,
  default: 'div'
},
itemTag: {
  type: String,
  default: 'div'
},
itemStyle: {
  type: Object
},
itemClass: {
  type: String,
  default: ''
},
disabled: {
  type: Boolean,
  default: false
},
draggable: {
  type: [Function, String]
},
dragging: {
  type: Function
},
ghostClass: {
  type: String,
  default: ''
},
ghostStyle: {
  type: Object,
  default: () => {
    return {}
  }
},
chosenClass: {
  type: String,
  default: ''
},
animation: {
  type: Number,
  default: 150
},
autoScroll: {
  type: Boolean,
  default: true
},
scrollStep: {
  type: Number,
  default: 5
},
scrollThreshold: {
  type: Number,
  default: 15
},
keepOffset: {
  type: Boolean,
  default: false
}

4. Available item slot props.

tag: {
  type: String,
  default: 'div'
},
event: {
  type: String
},
dataKey: {
  type: [String, Number]
},
isHorizontal: {
  type: Boolean
}

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:

Sortable Virtual Scrolling List Component For Vue

Changelog:

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

Add Comment