https://github.com/mfuu/vue3-virtual-drag-list
A virtual scrolling list component that can be sorted by dragging, for vue3
https://github.com/mfuu/vue3-virtual-drag-list
big-data bigdata dnd drag drag-and-drop draggable drop list sort sortable virtual virtual-list vue3
Last synced: 4 months ago
JSON representation
A virtual scrolling list component that can be sorted by dragging, for vue3
- Host: GitHub
- URL: https://github.com/mfuu/vue3-virtual-drag-list
- Owner: mfuu
- License: mit
- Created: 2022-07-27T07:22:32.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-01-21T02:12:29.000Z (6 months ago)
- Last Synced: 2025-03-16T21:11:49.888Z (4 months ago)
- Topics: big-data, bigdata, dnd, drag, drag-and-drop, draggable, drop, list, sort, sortable, virtual, virtual-list, vue3
- Language: TypeScript
- Homepage: https://mfuu.github.io/vue3-virtual-drag-list/
- Size: 1.55 MB
- Stars: 43
- Watchers: 3
- Forks: 11
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-virtual-draglist
[](https://www.npmjs.com/package/vue-virtual-draglist) [](https://www.npmjs.com/package/vue-virtual-draglist) [](https://vuejs.org/) [](LICENSE)
A virtual scrolling list component that can be sorted by dragging, support vue3
If you use vue with 2.x, see [here](https://github.com/mfuu/vue-virtual-drag-list)
### [Live demo](https://mfuu.github.io/vue3-virtual-drag-list/)
## Simple usage
```bash
npm i vue-virtual-draglist@next
```
Root component:
```vue
handle
{{ record.text }}
header
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`
// list.value = val;
// console.log(val);
// }
// })
```
## Emits
| **Emit** | **Description** |
| ------------- | ------------------------------------ |
| `top` | Scrolled to top of scroll element |
| `bottom` | Scrolled to bottom of scroll element |
| `drag` | Element dragging started |
| `drop` | Element dragging is completed |
| `rangeChange` | List rendering range changed |
## Props
### Required props
| **Prop** | **Type** | **Description** |
| ---------- | ------------------- | --------------------------------------------------------------------- |
| `data-key` | String | The unique identifier of each piece of data, in the form of `'a.b.c'` |
| `v-model` | 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` | `-` | `' '` \| `{ name: 'group', put: true\|false, pull: true\|false\|'clone', revertDrag: true\|false }` |
| `direction` | `vertical \| horizontal` | `vertical` | Scroll direction |
| `scroller` | `Document \| HTMLElement` | `-` | Virtual list scrolling element |
| `lockAxis` | `x \| y` | `-` | Axis on which dragging will be locked |
| `tableMode` | `Boolean` | `false` | Display with table and tbody |
| `keepOffset` | `Boolean` | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
| `debounceTime` | `Number` | `0` | Scroll debounce time |
| `throttleTime` | `Number` | `0` | Scroll throttle time |
**Uncommonly used**
| **Prop** | **Type** | **Default** | **Description** |
| ------------------ | --------- | ------------------------ | ------------------------------------------------------------- |
| `sortable` | `Boolean` | `true` | Whether the current list can be sorted by dragging |
| `draggable` | `String` | `.virtual-dnd-list-item` | Specifies which items inside the element should be draggable. |
| `itemClass` | `String` | `virtual-dnd-list-item` | Default list item class |
| `disabled` | `Boolean` | `false` | Disables the sortable if set to true |
| `animation` | `Number` | `150` | Animation speed moving items when sorting |
| `autoScroll` | `Boolean` | `true` | Automatic scrolling when moving to the edge of the container |
| `scrollSpeed` | `Object` | `{ x: 10, y: 10 }` | Vertical&Horizontal scrolling speed (px) |
| `scrollThreshold` | `Number` | `55` | Threshold to trigger autoscroll |
| `delay` | `Number` | `0` | Time in milliseconds to define when the sorting should start |
| `delayOnTouchOnly` | `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 |
| `wrapClass` | `String` | `''` | List wrapper element class |
| `wrapStyle` | `Object` | `{}` | List wrapper element style |
| `ghostClass` | `String` | `''` | The class of the mask element when dragging |
| `ghostStyle` | `Object` | `{}` | The style of the mask element when dragging |
| `chosenClass` | `String` | `''` | Class name for the chosen item |
| `placeholderClass` | `String` | `''` | Class name for the drop placeholder |
## 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 |
| `scrollToKey(key)` | Scroll to the specified data-key position |
| `scrollToIndex(index)` | Scroll to the specified index position |
| `scrollToOffset(offset)` | Scroll to the specified offset |