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 |