JSPM

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

Props type

Required props

Optional props

Public methods