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

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:

vue-draggable-plus

Changelog:

v0.3.4 (01/02/2024)

  • Update

Download Details:

Author: Alfred-Skyblue

Live Demo: https://alfred-skyblue.github.io/vue-draggable-plus/en/demo/basic/

Download Link: https://codeload.github.com/Alfred-Skyblue/vue-draggable-plus/zip/refs/heads/main

Official Website: https://github.com/Alfred-Skyblue/vue-draggable-plus

Install & Download:

# NPM
$ npm install vue-draggable-plus

Add Comment