Socket
Socket
Sign inDemoInstall

vue-virtual-draglist

Package Overview
Dependencies
1
Maintainers
1
Versions
92
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    vue-virtual-draglist

A virtual scrolling list component that can be sorted by dragging


Version published
Weekly downloads
450
decreased by-9.09%
Maintainers
1
Install size
208 kB
Created
Weekly downloads
 

Readme

Source

vue-virtual-draglist

npm npm vue2 Software License

A virtual scrolling list component that can be sorted by dragging

For Vue 3 support, see here

Live demo

Simple usage

npm i vue-virtual-draglist

Root component:

<template>
  <!--
    :handle="'I'" // use tagName 
    :handle="'.handle'" // use class
    :handle="'#handle'" // use id
  -->
  <virtual-list v-model="list" :data-key="'id'" :handle="'.handle'">
    <template slot="item" slot-scope="{ record, index, dataKey }">
      <div>
        <span class="handle">{{ record.id }}</span>
        {{ record.text }}
      </div>
    </template>
    <template slot="header">
      <div class="header">header</div>
    </template>
    <template slot="footer">
      <div class="footer">footer</div>
    </template>
  </virtual-list>
</template>

<script>
import virtualList from 'vue-virtual-draglist';

export default {
  name: 'root',
  components: { virtualList },
  data () {
    return {
      list: [{ id: '1', text: 'a' }, { id: '2', text: 'b' }, ...];
    }
  },
  methods: {

  }
}
</script>

Emits

EmitDescription
topscrolled to top
bottomscrolled to bottom
dragdrag is started
dropdrag is completed
addelement is dropped into the list from another
removeelement is removed from the list into another
rangeChangetriggered when the range changes

Props

Required props

PropTypeDescription
data-keyStringThe unique identifier of each piece of data, in the form of 'a.b.c'
v-modelArrayThe data that needs to be rendered

Optional props

Commonly used

PropTypeDefaultDescription
keepsNumber30The number of lines rendered by the virtual scroll
sizeNumber-The estimated height of each piece of data, you can choose to pass it or not, it will be automatically calculated
handleFunction/String-Drag handle selector within list items
groupFunction/String-string: 'name' or object: { name: 'group', put: true/false, pull: true/false/'clone', revertDrag: true/false }
keepOffsetBooleanfalseWhen scrolling up to load data, keep the same offset as the previous scroll
directionvertical | horizontalverticalScroll direction
scrollerDocument | HTMLElement-Virtual list scrolling element
lockAxisx | y-Axis on which dragging will be locked
debounceTimeNumber0debounce time on scroll
throttleTimeNumber0throttle time on scroll

Uncommonly used

PropTypeDefaultDescription
sortableBooleantrueWhether the current list can be sorted by dragging
draggableString.virtual-dnd-list-itemSpecifies which items inside the element should be draggable
disabledBooleanfalseDisables the sortable if set to true
animationNumber150Animation speed moving items when sorting
autoScrollBooleantrueAutomatic scrolling when moving to the edge of the container
scrollThresholdNumber55Threshold to trigger autoscroll
delayNumber0Time in milliseconds to define when the sorting should start
delayOnTouchOnlyBooleanfalseOnly delay on press if user is using touch
fallbackOnBodyBooleanfalseAppends the ghost element into the document's body
rootTagStringdivLabel type for root element
wrapTagStringdivLabel type for list wrap element
wrapClassString''List wrapper element class
wrapStyleObject{}List wrapper element style
ghostClassString''The class of the mask element when dragging
ghostStyleObject{}The style of the mask element when dragging
chosenClassString''Class name for the chosen item

Methods

Use ref to get the method inside the component

MethodDescription
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

Keywords

FAQs

Last updated on 22 May 2024

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc