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>
    <!--
      :dataSource="items"
      :handle="'i'" // use tagName 
      :handle="'.drag'" // use class
      :handle="'#drag'" // use id
    -->
    <VirtualList
      v-model:dataSource="items"
      :dataKey="'id'"
      :handle="'#drag'"
      style="height: 500px;"
    >
      <template v-slot:item="{ record, index, dataKey }">
        <i id="drag" class="drag">drag me</i>
        <span>{{ record.text }}</span>
      </template>
    </VirtualList>
  </div>
</template>

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

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

Emits

| Emit | Description | |--------------|-----------------| | top | Event fired when scroll to top | | bottom | Event fired when scroll to bottom | | drag | Event fired when the drag is started | | drop | Event fired when the drag is completed | | add | Event fired when element is dropped into the list from another | | remove | Event fired when element is removed from the list into another |

Props

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/Ref | The data that needs to be rendered |

Optional props

Commonly used

| Prop | Type | Default | Description | | ------------ | --------- | ----------- | --------------- | | keeps | Number | 30 | The number of lines rendered by the virtual scroll | | size | Number | - | The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated | | handle | Function/String | - | Drag handle selector within list items | | group | Object/String | - | string: 'name' or object: { name: 'group', put: true/false, pull: true/false } | | keepOffset | Boolean | false | When scrolling up to load data, keep the same offset as the previous scroll | | direction | String | vertical | vertical/horizontal, scroll direction | | pageMode | Boolean | false | Let virtual list using global document to scroll through the list |

Uncommonly used

| Prop | Type | Default | Description | | -------- | -------- | ----------- | --------------- | | draggable | Function/String | - | Specifies which items inside the element should be draggable. If does not set a value, the default list element can be dragged | | disabled | Boolean | false | Disables the sortable if set to true | | delay | Number | 0 | Delay time of debounce function | | animation | Number | 150 | Animation speed moving items when sorting | | autoScroll | Boolean | true | Automatic scrolling when moving to the edge of the container | | scrollThreshold | Number | 55 | Threshold to trigger autoscroll | | pressDelay | Number | 0 | Time in milliseconds to define when the sorting should start | | pressDelayOnTouchOnly | Boolean | false | Only delay on press if user is using touch | | fallbackOnBody | Boolean | false | Appends the ghost element into the document's body | | rootTag | String | div | Label type for root element | | wrapTag | String | div | Label type for list wrap element | | itemTag | String | div | Label type for list item element | | headerTag | String | div | Label type for header slot element | | headerStyle| Object | {} | Header slot element style | | footerTag | String | div | Label type for footer slot element | | footerStyle| Object | {} | Footer slot element style | | wrapClass | String | '' | List wrapper element class | | wrapStyle | Object | {} | List wrapper element style | | itemClass | String | '' | List item element class | | itemStyle | Object | {} | List item element style | | ghostClass | String | '' | The class of the mask element when dragging | | ghostStyle | Object | {} | The style of the mask element when dragging | | chosenClass| String | '' | The class of the selected element when dragging |

Methods

| Method | Description | | ------------------ | --------------- | | getSize(key) | Get the size of the current item by unique key value | | getOffset() | Get the current scroll height | | getClientSize() | Get wrapper element client viewport size (width or height) | | getScrollSize() | Get all scroll size (scrollHeight or scrollWidth) | | scrollToTop() | Scroll to top of list | | scrollToBottom() | Scroll to bottom of list | | scrollToIndex(index) | Scroll to the specified index position | | scrollToOffset(offset) | Scroll to the specified offset |