vue3-draggable

simple drag&drop component for vue 3.x
292,920 36
Install
npm install vue3-draggable
Latest Version:2.0.9
Vue:3
License:MIT
Last Updated:Jan 11, 2023
Links: GitHub  ·  npm
Maintainer: shkilo

vue3-draggable

list-based drag&drop component for vue 3.x, with no dependencies

vue3-drag2

Features

  • support v-model
  • support transition
  • customizable draggable component

Nested useage is currently not supported

Installation

npm i vue3-draggable

Try Sample

git clone https://github.com/shkilo/vue3-draggable.git

npm i
npm run serve

Usage

import component:

import Draggable from "vue3-draggable";

export default {
  components: {
    Draggable,
  },
};

template:

<draggable v-model="items">
    <template v-slot:item="{item}">
        <!-- example -->
        <div>
            {{item.title}}
        </div>
        <!-- or your own template -->
    </template>
</draggable>

This componet is implemented based on v-slot

Props

Name Required Type Description
modelValue REQUIRED ARRAY v-model value, items to be bound
transition OPTIONAL STRING transition delay in ms

Related Packages

vue-dndrop

Vue wrappers for drag and drop

560,182 233
vue-draggable

Vue drag and drop library without any dependency

231,114 302
@nocyoung/vue-draggable

Vue Drag and Drop component which can be used for PC and H5 without any dependen...

305
vue-drag-n-drop

A simple kanban board where the items can be dragged and dropped from the list....

3,460 198

Version History

Version Released License
2.0.9 MIT
2.0.8 MIT
2.0.7 MIT
2.0.6 MIT
2.0.5 MIT