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>
  <div>
    <!--
      :handle="'I'" // use tagName 
      :handle="'.handle'" // use class
      :handle="'#handle'" // use id
      :data-source="list" // or replace with `v-model`
    -->
    <virtual-drag-list
      v-model="list"
      :data-key="'id'"
      :handle="'.handle'"
      style="height: 500px"
      @top="handleToTop"
      @bottom="handleToBottom"
      @drag="onDrag"
      @drop="onDrop"
      @add="onAdd"
      @remove="onRemove"
    >
      <template slot="item" slot-scope="{ record, index, dataKey }">
        <i class="handle">{{ 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>
  </div>
</template>

<script>
  import virtualDragList from 'vue-virtual-draglist'

  export default {
    name: 'root',
    components: { virtualDragList },
    data () {
      return {
        list: [{id: '1', text: 'asd'}, {id: '2', text: 'fgh'}, ...]
      }
    },
    methods: {
      handleToTop() {
        // code here
      },
      handleToBottom() {
        // code here
      },
      onDrag({ list, from }) {
        // code here
      },
      onDrop({ list, from, to, changed }) {
        // code here
      },
      onAdd({ item, key, index }) {
        // code here
      },
      onRemove({ item, key, index }) {
        // code here
      }
    }
  }
</script>

Emits

Emit	Description
top	Event fired when scroll to top
bottom	Event fired when scroll to bottom
drag	Event fired when the drag is started
drop	Event fired when the drag is completed
add	Event fired when element is dropped into the list from another
remove	Event fired when element is removed from the list into another

Props

Required props

Prop	Type	Description
data-key	String	The unique identifier of each piece of data, in the form of 'a.b.c'
data-source	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 }
keepOffset	Boolean	false	When scrolling up to load data, keep the same offset as the previous scroll
direction	String	vertical	vertical/horizontal, scroll direction
pageMode	Boolean	false	Let virtual list using global document to scroll through the list

Uncommonly used

Prop	Type	Default	Description
draggable	Function/String	-	Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged
disabled	Boolean	false	Disables the sortable if set to true
delay	Number	0	Delay time of debounce function
animation	Number	150	Animation speed moving items when sorting
autoScroll	Boolean	true	Automatic scrolling when moving to the edge of the container
scrollThreshold	Number	55	Threshold to trigger autoscroll
pressDelay	Number	0	Time in milliseconds to define when the sorting should start
pressDelayOnTouchOnly	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
itemTag	String	div	Label type for list item element
headerTag	String	div	Label type for header slot element
headerStyle	Object	{}	Header slot element style
footerTag	String	div	Label type for footer slot element
footerStyle	Object	{}	Footer slot element style
wrapClass	String	''	List wrapper element class
wrapStyle	Object	{}	List wrapper element style
itemClass	String	''	List item element class
itemStyle	Object	{}	List item element style
ghostClass	String	''	The class of the mask element when dragging
ghostStyle	Object	{}	The style of the mask element when dragging
chosenClass	String	''	The class of the selected element when dragging

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
scrollToIndex(index)	Scroll to the specified index position
scrollToOffset(offset)	Scroll to the specified offset