Simple Flexible Drag And Drop Component For Vue 3

Install & Download:

# NPM
$ npm i vue-flexable-dnd

Description:

A simple yet powerful drag and drop component for Vue 3 applications. Compatible with CSS flex layout and comes with two modes: Replace and Sort. Also provides a smooth animation when dragging and dropping elements.

How to use it:

1. Install and import the drag and drop component.

import { createApp } from 'vue'
import App from './App.vue'
import VDContainer from 'vue-flexable-dnd'
createApp(App).use(VDContainer).mount('#app')

2. Basic usage.

<VDContainer
  :width=640
  :animation=true
  :data=data
  type="sort" // or switch
  @getData=funcName
>
  <template v-slot:VDC="{data, index}">
    <div>
      {{data.objectParameter1}}
      {{data.objectParamerter2}}
    </div>
  </template>
</VDContainer>

export default {
  data() {
    return {
      data: [
        {
          objectParameter1: 'anyThing',
          objectParamerter2: 'anyThing2'
        },{
          objectParameter1: 'anyThing3',
          objectParamerter2: 'anyThing4'
        },
      ]
    }
  }
}

3. Available props.

width: number,
height: number,
data: [],
animation: boolean,
row: number,
type: string,

Preview: