vue-virtual-draglist-lock-axis-fork v2.8.0

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

Props

Required props

Optional props

Commonly used

Uncommonly used

Methods

Use ref to get the method inside the component