Sortable Virtual Scrolling List Component For Vue 3

Install & Download:

# NPM
$ npm i vue-virtual-draglist@next

Description:

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. Compatible with Vue 3 and Vue 2.

How to use it:

1. Import the component after installation.

import virtualDragList from 'vue-virtual-draglist'

2. Add the virtual-drag-list component to the template and define the data list.

<template>
  <div>
    <!--
      :dataSource="items"
      :handle="'i'" // use tagName 
      :handle="'.drag'" // use class
      :handle="'#drag'" // use id
    -->
    <VirtualList
      v-model:dataSource="items"
      :dataKey="'id'"
      :handle="'#drag'"
      style="height: 500px;"
    >
      <template v-slot:item="{ record, index, dataKey }">
        <i id="drag" class="drag">drag me</i>
        <span>{{ record.text }}</span>
      </template>
    </VirtualList>
  </div>
</template>
const list = ref([{id: '1', text: 'abc'}, {id: '2', text: 'def'}]);
const items = computed({
  get() {
    return list.value;
  },
  set(val) {
    list.value = val;
    console.log(val);
  }
})

3. Available component props.

ataSource: {},
modelValue: {},
dataKey: {
  type: String,
  default: '',
  required: true,
},
draggable: {
  type: String,
  default: '.virtual-dnd-list-item'
},
sortable: {
  type: Boolean,
  default: true
},
handle: {
  type: [Function, String],
},
group: {
  type: [Object, String],
},
scroller: {
  type: [Document, HTMLElement],
},
lockAxis: {
  type: String as PropType<LockAxis>,
  default: '',
},
direction: {
  type: String as PropType<Direction>,
  default: 'vertical',
},
keeps: {
  type: Number,
  default: 30,
},
size: {
  type: Number,
},
debounceTime: {
  type: Number,
  default: 0,
},
throttleTime: {
  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,
},
delay: {
  type: Number,
  default: 0,
},
delayOnTouchOnly: {
  type: Boolean,
  default: false,
},
rootTag: {
  type: String,
  default: 'div',
},
wrapTag: {
  type: String,
  default: 'div',
},
itemTag: {
  type: String,
  default: 'div',
},
wrapClass: {
  type: String,
  default: '',
},
wrapStyle: {
  type: Object,
  default: () => ({}),
},
itemStyle: {
  type: Object,
  default: () => ({}),
},
itemClass: {
  type: String,
  default: '',
},
ghostClass: {
  type: String,
  default: '',
},
ghostStyle: {
  type: Object,
  default: () => ({}),
},
chosenClass: {
  type: String,
  default: '',
},

4. Slot props.

tag: {
  type: String,
  default: 'div',
},
dataKey: {
  type: [String, Number],
},
sizeKey: {
  type: String,
},

5. API methods.

// scroll to top
scrollToTop();
// scroll to bottom
scrollToBottom();
// scroll to the specified data-key position
scrollToKey(key);
// 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();
// get wrapper element client viewport size
getClientSize();
// get all scroll size (scrollHeight or scrollWidth)
getScrollSize()

6. Events.

  • @top: fired when scroll to top
  • @bottom: fired when scroll to bottom
  • @drag: fired when the drag is started
  • @drop: fired when the drag is completed
  • @add: fired when element is dropped into the list from another
  • @remove: fired when element is removed from the list into another

Preview:

Sortable Virtual Scrolling List Component For Vue

Changelog:

v3.2.3 (04/15/2024)

  • Fix reactivity of sortable and virtual props
  • Added props sortable: Whether the current list can be sorted by dragging. (When sortable is true, the current list cannot be scrolled during dragging)
  • Default item class virtual-dnd-list-item
  • Default draggable value .virtual-dnd-list-item
  • Adjusted the drop event params

v3.2.1 (03/02/2024)

  • bugfixes

v3.2.0 (01/06/2024)

  • clone support: group: { pull: ‘clone’ }
  • delay => debounceTime, throttleTime
  • pressDelay => delay
  • pressDelayOnTouchOnly => delayOnTouchOnly
  • pageMode: now replaced by scroller: window or scroller: document
  • added more props
  • added scrollToKey(key): Scroll to the specified data-key position

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

Add Comment