npm:vue-virtual-draglist

README

A virtual scrolling list component that can be sorted by dragging , for Vue

Simple usage

npm i vue-virtual-draglist -D

Root component:

<template>
  <div>
    <virtual-drag-list
      :data-key="'id'"
      :data-source="list"
      @top="handleToTop"
      @bottom="handleToBottom"
      @ondragend="ondragend"
    >
      <template slot="item" slot-scope="{ record, index, dataKey }">
        <span draggable="true">{{ 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',
    data () {
      return {
        list: [{id: '1', text: 'asd'}, {id: '2', text: 'fgh'}, ...]
      }
    },
    components: { virtualDragList },
    methods: {
      handleToTop() {
        ...
      },
      handleToBottom() {
        ...
      },
      ondragend(list) {
        console.log(list)
      }
    }
  }
</script>

Emits

emit	Description
`top`	event fired when scroll to top
`bottom`	event fired when scroll to bottom
`ondragend`	event fired when the drag is complete, return a new array

Props type

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	data list

Optional props

Commonly used

Prop	Type	Default	Description
`keeps`	Number	30	the number of lines rendered by the virtual scroll
`size`	Number	50	The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
`draggable`	Boolean	true	whether to support drag and drop. You need to specify a draggable element and set the `draggable` attribute for it

Uncommonly used

Prop	Type	Default	Description
`headerTag`	String	`div`	Label type for header slot
`footerTag`	String	`div`	Label type for footer slot
`itemTag`	String	`div`	item's tag type
`itemStyle`	Object	`{}`	item's style
`itemClass`	String	`''`	item's class
`dragStyle`	Object	`{}`	mask style when dragging

Public methods

Usefull public methods

Use ref to get the method inside the component

Method	Description
`scrollToBottom()`	scroll to bottom of list
`scrollToIndex(index)`	scroll to the specified index position
`scrollToOffset(offset)`	scroll to the specified height
`getSize(dataKey)`	get the height of the current item by unique key value
`getOffset()`	get the current scroll height

Usage no npm install needed!