/vue3-draggable

simple drag&drop component for vue 3.x

Primary LanguageTypeScriptMIT LicenseMIT

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