v3-drag
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 |
Dependencies
@typescript-eslint/eslint-plugin: ^2.33.0@typescript-eslint/parser: ^2.33.0@vue/cli-plugin-babel: ~4.5.0@vue/cli-plugin-eslint: ~4.5.0@vue/cli-plugin-typescript: ^4.5.13@vue/cli-service: ~4.5.0@vue/compiler-sfc: ^3.0.0@vue/eslint-config-prettier: ^6.0.0@vue/eslint-config-typescript: ^5.0.2babel-eslint: ^10.1.0core-js: ^3.6.5eslint: ^6.7.2eslint-plugin-prettier: ^3.1.3eslint-plugin-vue: ^7.0.0-0prettier: ^1.19.1typescript: ~4.1.5vue: ^3.0.0