Feature-rich Drag’n’drop Sorting Library – vue-draggable-plus

Install & Download:

# NPM
$ npm install vue-draggable-plus

Description:

A flexible, feature-rich, customizable drag-to-sort library for Vue 3 and Vue 2 applications.

How to use it:

1. Import the vue-draggable-plus component.

import { ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'

2. Define your draggable list as follows:

const list = ref([
  {
    name: 'Item 1',
    id: '1'
  },
  {
    name: 'Item 2',
    id: '2'
  },
  {
    name: 'Item 3',
    id: '3'
  },
  {
    name: 'Item 4',
    id: '4'
  },
  // ...
])

3. Use it as a component.

<template>
  <VueDraggable ref="el" v-model="list">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </VueDraggable>
</template>

4. Use it as a hook.

<template>
  <div ref="el">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
  const el = ref<HTMLElement | null>(null)
  const draggable = useDraggable(el, list, {
    animation: 150,
    onStart() {
      console.log('start')
    },
    onUpdate() {
      console.log('update')
    }
  })
</script>

5. Use it as a directive.

<template>
  <div
    v-draggable="[
      list,
      {
        animation: 150,
      }
    ]"
  >
    <div
      v-for="item in list"
      :key="item.id"
    >
      {{ item.name }}
    </div>
  </div>
</template>

6. Available props.

'animation',
'ghostClass',
'group',
'sort',
'disabled',
'store',
'handle',
'draggable',
'swapThreshold',
'invertSwap',
'invertedSwapThreshold',
'removeCloneOnHide',
'direction',
'chosenClass',
'dragClass',
'ignore',
'filter',
'preventOnFilter',
'easing',
'setData',
'dropBubble',
'dragoverBubble',
'dataIdAttr',
'delay',
'delayOnTouchOnly',
'touchStartThreshold',
'forceFallback',
'fallbackClass',
'fallbackOnBody',
'fallbackTolerance',
'fallbackOffset',
'supportPointer',
'emptyInsertThreshold',
'scroll',
'forceAutoScrollFallback',
'scrollSensitivity',
'scrollSpeed',
'bubbleScroll',
'modelValue',
'tag',
'target',
'customUpdate',

7. Events.

'update',
'start',
'add',
'remove',
'choose',
'unchoose',
'end',
'sort',
'filter',
'clone',
'move',
'change'

Preview:

Changelog:

v0.3.4 (01/02/2024)

• Update