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

Current Tags

2.0.9 ... latest (5 years ago)

vue3-draggable

Features

Installation

Try Sample

Usage

Props

Current Tags

24 Versions