Vue-virtual-draglist NPM

vue-virtual-draglist

A virtual scrolling list component that can be sorted by dragging

For Vue 3 support, see here

Live demo

Simple usage

npm i vue-virtual-draglist

Root component:

<template>
  <!--
    :handle="'I'" // use tagName 
    :handle="'.handle'" // use class
    :handle="'#handle'" // use id
  -->
  <virtual-list v-model="list" :data-key="'id'" :handle="'.handle'">
    <template slot="item" slot-scope="{ record, index, dataKey }">
      <div>
        <span class="handle">{{ record.id }}</span>
        {{ record.text }}
      </div>
    </template>
    <template slot="header">
      <div class="header">header</div>
    </template>
    <template slot="footer">
      <div class="footer">footer</div>
    </template>
  </virtual-list>
</template>

<script>
import virtualList from 'vue-virtual-draglist';

export default {
  name: 'root',
  components: { virtualList },
  data () {
    return {
      list: [{ id: '1', text: 'a' }, { id: '2', text: 'b' }, ...];
    }
  },
}
</script>

Emits

Emit	Description
`top`	scrolled to top
`bottom`	scrolled to bottom
`drag`	drag is started
`drop`	drag is completed
`rangeChange`	range changed

Props

Required props

Prop	Type	Description
`data-key`	String	The unique identifier of each piece of data, in the form of `'a.b.c'`
`v-model`	Array	The data that needs to be rendered

Optional props

Commonly used

Prop	Type	Default	Description
`keeps`	`Number`	`30`	The number of lines rendered by the virtual scroll
`size`	`Number`	`-`	The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
`handle`	`Function/String`	`-`	Drag handle selector within list items
`group`	`Function/String`	`-`	string: 'name' or object: `{ name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }`
`direction`	`vertical \\| horizontal`	`vertical`	Scroll direction
`scroller`	`Document \\| HTMLElement`	`-`	Virtual list scrolling element
`lockAxis`	`x \\| y`	`-`	Axis on which dragging will be locked
`tableMode`	`Boolean`	`false`	display with table and tbody
`keepOffset`	`Boolean`	`false`	When scrolling up to load data, keep the same offset as the previous scroll
`debounceTime`	`Number`	`0`	debounce time on scroll
`throttleTime`	`Number`	`0`	throttle time on scroll

Uncommonly used

Prop	Type	Default	Description
`sortable`	`Boolean`	`true`	Whether the current list can be sorted by dragging
`draggable`	`String`	`.virtual-dnd-list-item`	Specifies which items inside the element should be draggable
`itemClass`	`String`	`virtual-dnd-list-item`	Default list item class
`disabled`	`Boolean`	`false`	Disables the sortable if set to true
`animation`	`Number`	`150`	Animation speed moving items when sorting
`autoScroll`	`Boolean`	`true`	Automatic scrolling when moving to the edge of the container
`scrollSpeed`	`Object`	`{ x: 10, y: 10 }`	Vertical&Horizontal scrolling speed (px)
`scrollThreshold`	`Number`	`55`	Threshold to trigger autoscroll
`delay`	`Number`	`0`	Time in milliseconds to define when the sorting should start
`delayOnTouchOnly`	`Boolean`	`false`	Only delay on press if user is using touch
`fallbackOnBody`	`Boolean`	`false`	Appends the ghost element into the document's body
`rootTag`	`String`	`div`	Label type for root element
`wrapTag`	`String`	`div`	Label type for list wrap element
`wrapClass`	`String`	`''`	List wrapper element class
`wrapStyle`	`Object`	`{}`	List wrapper element style
`ghostClass`	`String`	`''`	The class of the mask element when dragging
`ghostStyle`	`Object`	`{}`	The style of the mask element when dragging
`chosenClass`	`String`	`''`	Class name for the chosen item
`placeholderClass`	`String`	`''`	Class name for the drop placeholder

Methods

Use ref to get the method inside the component

Method	Description
`getSize(key)`	Get the size of the current item by unique key value
`getOffset()`	Get the current scroll height
`getClientSize()`	Get wrapper element client viewport size (width or height)
`getScrollSize()`	Get all scroll size (scrollHeight or scrollWidth)
`scrollToTop()`	Scroll to top of list
`scrollToBottom()`	Scroll to bottom of list
`scrollToKey(key)`	Scroll to the specified data-key position
`scrollToIndex(index)`	Scroll to the specified index position
`scrollToOffset(offset)`	Scroll to the specified offset