Package Exports

vue-virtual-draglist
vue-virtual-draglist/dist/virtual-drag-list.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-virtual-draglist) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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
`footerTag`	`String`	`div`	Label type for footer slot element
`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