Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
vue-virtual-draglist
Advanced tools
Readme
A virtual scrolling list component that can be sorted by dragging, support vue3
If you use vue with 2.x, see here
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>
Emit | Description |
---|---|
top | scrolled to top |
bottom | scrolled to bottom |
drag | drag is started |
drop | drag is completed |
add | element is dropped into the list from another |
remove | element is removed from the list into another |
rangeChange | triggered when the range changes |
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 |
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/'clone', revertDrag: true/false } |
keepOffset | Boolean | false | When scrolling up to load data, keep the same offset as the previous scroll |
direction | vertical | horizontal | vertical | Scroll direction |
scroller | Document | HTMLElement | - | Virtual list scrolling element |
lockAxis | x | y | - | Axis on which dragging will be locked |
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. |
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 |
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 |
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 |
FAQs
A virtual scrolling list component that can be sorted by dragging
The npm package vue-virtual-draglist receives a total of 454 weekly downloads. As such, vue-virtual-draglist popularity was classified as not popular.
We found that vue-virtual-draglist demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.