vue-virtual-sortable

vue-virtual-sortable

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-sortable

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>
        <p>{{ record.text }}</p>
      </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-sortable';

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 of scroll element
bottom	Scrolled to bottom of scroll element
drag	Element dragging started
drop	Element dragging is completed
rangeChange	List rendering 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, it will be automatically calculated
handle	Function/String	-	Drag handle selector within list items
group	Object/String	-	Set value to allow drag between different lists
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	Scroll debounce time
throttleTime	Number	0	Scroll throttle time

Uncommonly used

Prop	Type	Default	Description
buffer	Number	Math.round(keeps / 3)	Buffer size to detect range change
disabled	Boolean	false	Disables the sortable if set to true
sortable	Boolean	true	Whether the current list can be sorted by dragging
draggable	String	[role="item"]	Specifies which items inside the element should be draggable.
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
appendToBody	Boolean	false	Appends the ghost element into the document's body
dropOnAnimationEnd	Boolean	true	Whether to trigger the drop event when the animation ends
rootTag	String	div	Label type for root element
wrapTag	String	div	Label type for list wrap element
wrapClass	String	''	Class name for list wrap element
wrapStyle	Object	{}	Style object for list wrap element
ghostClass	String	''	Class name for the mask element when dragging
ghostStyle	Object	{}	Style object for 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, align)	Scroll to the specified data-key position
scrollToIndex(index, align)	Scroll to the specified index position
scrollToOffset(offset)	Scroll to the specified offset