vue-virtual-draglist

可拖拽排序的虚拟滚动列表组件（使用最新版本）

Simple usage

npm i vue-virtual-draglist -D

Root component:

<template>
  <div>
    <virtual-drag-list
      :data-key="'id'"
      :data-source="list"
      @ondragend="ondragend"
    >
      <template #item="{ record, index, dataKey }">
        <span draggable="true">{{ record.id }}</span>
        {{ record.text }}
      </template>
      <template slot="header"></template>
      <template slot="footer"></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: {
      ondragend(list) {
        console.log(list)
      }
    }
  }
</script>

Props type

Required props

Prop	Type	Description
data-key	String	每一条数据的唯一标识
data-source	Array	数据源

Optional props

Commonly used

Prop	Type	Default	Description
keeps	Number	30	虚拟滚动展示的数据量
size	Number	50	每一条数据的预估高度，可选择传或不传，会自动计算
draggable	Boolean	true	默认可拖拽，需要手动指定拖拽元素，设置draggable="true"

Uncommonly used

Prop	Type	Default	Description
headerTag	String	div	顶部插槽的标签类型
footerTag	String	div	底部插槽的标签类型
itemTag	String	div	item的标签类型
itemStyle	Object	{}	item样式
itemClass	String	''	item类名
draggable	Boolean	true	是否可拖拽
dragStyle	Object	{ backgroundImage: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 98%, #FFFFFF 100%)' }	item样式

Public methods

Usefull public methods

使用 ref 去获取组件内部的方法

Method	Description
scrollToBottom()	滚动到底部
scrollToIndex(index)	滚动到指定index值位置
scrollToOffset(offset)	滚动到指定高度