Vue3-draggable2 NPM

vue3-draggable

simple drag&drop component for vue 3.x, with no dependencies

vue3-drag

Features

support v-model
customizable draggable component

Installation

npm i vue3-draggable

Usage

import component:

import Draggable from 'vue3-draggable';

export default {
  components: {
    Draggable,
  },
};

template:

<draggable v-model="items" dropZoneId="1" class="drop-zone">
    <template v-slot:item="{item}">
        <!-- example -->
        <div class="draggable-item">
            {{item.title}}
        </div>
        <!-- or your own template -->
    </template>
</draggable>

Props

Name	Required	Type	Description
modelValue	REQUIRED	ARRAY	v-model value, items to be bound each item in array should have 'id' property ex) {id:1, title:item1}, {id:2, title: item2}
dropZoneId	REQUIRED	STRING	unique id is required for each draggable component

draggable vue3 vue drag drop drag and drop

core-js vue

1.0.3

3 years ago