Sortable Virtual Scrolling List Component For Vue

Description:

This is a virtual scrolling list component that can be sorted by dragging an item in the list (drag and drop sorting) and the individual items can have custom styles.

How to use it:

1. Import and register the component.

import virtualDragList from 'vue-virtual-draglist'
export default {
  // ...
  components: { virtualDragList },
  // ...
}

2. Add the virtual-drag-list component to the template and define the data list.

<virtual-drag-list
  :data-key="'id'"
  :data-source="list"
  :draggable="'.drag'"
  @top="handleToTop"
  @bottom="handleToBottom"
  @ondragend="ondragend"
>
  <template slot="item" slot-scope="{ record, index, dataKey }">
    <span class="drag">{{ 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>
export default {
  name: 'root',
  data () {
    return {
      list: [], // your data here
    }
  },
  components: { virtualDragList },
  methods: {
    handleToTop() {
      // do something
    },
    handleToBottom() {
      // do something
    },
    ondragend(list, old, nw, changed) {
      // do something
    }
  }
}

3. Available component props.

dataSource: {
  type: Array,
  default: () => {
    return []
  }
},
dataKey: {
  type: String,
  required: true
},
height: {
  type: String,
  default: '100%'
},
keeps: {
  type: Number,
  default: 30
},
size: {
  type: Number
},
delay: {
  type: Number,
  default: 10
},
headerTag: {
  type: String,
  default: 'div'
},
footerTag: {
  type: String,
  default: 'div'
},
itemTag: {
  type: String,
  default: 'div'
},
itemStyle: {
  type: Object,
  default: () => {
    return {}
  }
},
itemClass: {
  type: String,
  default: ''
},
disabled: {
  type: Boolean,
  default: false
},
draggable: {
  type: [Function, String]
},
dragging: {
  type: Function
},
ghostClass: {
  type: String,
  default: ''
},
ghostStyle: {
  type: Object,
  default: () => {
    return {
      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%)'
    }
  }
},
chosenClass: {
  type: String,
  default: ''
},
animation: {
  type: Number,
  default: 150
}

4. Available item slot props.

tag: {
  type: String,
  default: 'div'
},
event: {
  type: String
},
dragStyle: {
  type: Object,
  default: () => {
    return {}
  }
},
uniqueKey: {
  type: [String, Number]
}

5. API methods.

// on dragEnd
ondragend(list, old, new, changed);

// scroll to bottom
scrollToBottom();

// scroll to top
scrollToTop();

// scroll to a specific item
scrollToIndex(index);

// scroll to a specific position
scrollToOffset(offset);

// get height of the current item
getSize(dataKey);

// get offset of the list
getOffset();

// reset
reset();

Preview:

Sortable Virtual Scrolling List Component For Vue

Changelog:

v2.6.5 (05/22/2022)

  • Fix props error
  • Fix bug that ondragend function emit error
  • Fix the problem that dataKey cannot find the value from number type to string type

05/21/2022

  • v2.6.3: Bugfix

Download Details:

Author: mfuu

Live Demo: https://mfuu.github.io/vue-virtual-drag-list/

Download Link: https://github.com/mfuu/vue-virtual-drag-list/archive/refs/heads/main.zip

Official Website: https://github.com/mfuu/vue-virtual-drag-list

Install & Download:

# Yarn
$ yarn add vue-virtual-draglist

# NPM
$ npm i vue-virtual-draglist

You Might Be Interested In:

Add Comment