vue-virtual-draglist

A virtual scrolling list component that can be sorted by dragging, support vue3

If you use vue with 2.x, see here

Live demo

Simple usage

npm i vue-virtual-draglist@next

Root component:

<template>
  <div>
    <!--
      :handle="'i'" // use tagName 
      :handle="'.handle'" // use class
      :handle="'#handle'" // use id
    -->
    <VirtualList v-model="list" :dataKey="'id'" :handle="'#handle'" style="height: 500px;">
      <template v-slot:item="{ record, index, dataKey }">
        <div>
          <i id="handle" class="handle">handle</i>
          <p>{{ record.text }}</p>
        </div>
      </template>
      <template v-slot:header>
        <div class="header">header</div>
      </template>
      <template v-slot:footer>
        <div class="footer">footer</div>
      </template>
    </VirtualList>
  </div>
</template>

<script setup lang="ts">
import VirtualList from 'vue-virtual-draglist';

const list = ref([
  { id: '1', text: 'abc' },
  { id: '2', text: 'def' },
]);
// const items = computed({
//   get() {
//     return list.value;
//   },
//   set(val) {
//     // trigger when drag state changed if you use with `v-model:dataSource`
//     list.value = val;
//     console.log(val);
//   }
// })
</script>

Emits

Props

Required props

Optional props

Commonly used

Uncommonly used

Methods