vue3-draggable
list-based drag&drop component for vue 3.x, with no dependencies
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 |