dragandropvue v0.3.9

drag-and-drop-vue

• Install
• Usage
• Props
• Events

The main usage of this package is for drag-and-drop functionality. The user create multiple sections and in that sections provide the facilities to create multiple cards. all cards are swapable and also drag and drop in any section. The user can also Edit and Delete card.

install

npm i dragandropvue

import { SimpleDragVue } from 'dragandropvue';

export default {
  // ...
  components: {
    SimpleDragVue
  }
  // ...
}

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Usage

value prop if passed should be a response object

<script>
data() {
    return {
      response: {
        data: [
    {
      title: "Section 1",
      drop_col_id: "",
      data: [
        { 
          title: 'Card 1',
          description: "<p>Description Of card<p>",
          attachment: null,
          deadlineDate: Deadline Date, 
        },
        { 
          title: 'Card 2',
          description: "<p>Description Of card<p>",
          attachment: null,
          deadlineDate: Deadline Date,
          },
        { 
          title: "Card 3",
          description: "<p>Description Of card<p>",
          attachment: null,
          deadlineDate: Deadline Date,
        },
      ],
    },
    {
      title: "Section 2",
      data: [
        { 
          title: 66, 
          description: "<p>Description Of card<p>",
          attachment: null,
          deadlineDate: Deadline Date,
        }
      ],
    },
    {
      title: "Section 3",
      data: [],
    },
  ],
      },
      modalOpened: false
    }
  },

</script>
<SimpleDragVue
  :responseData="response"
  :isModalOpened="modalOpened"
  addCardTitle="+Add Card"
  addSectionTitle="Add Section"
/>

Emits events

<SimpleDragVue
  :responseData="response"
  :isModalOpened="modalOpened"
  addCardTitle="+Add Card"
  addSectionTitle="Add Section"
  @add-card="addNewCardEvent"
  @edit-card="editCardEvent"
>

Available props

Events

These events are emitted on actions in the datepicker

Slots

Slots will help you customize content.

Sometimes you need to add your custom field in card. An example would be to use custom input field :

<template v-slot:cardForm>
  <input type="text" />
</template>