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)