Drag And Drop Functionality For Vue.js - dnd-zone

Install & Download:

# Yarn
$ yarn add vue-dnd-zone
# NPM
$ npm i vue-dnd-zone

Description:

dnd-zone is a drag and drop library for Vue.js that lets you create draggable elements (like lists, grids) in your Vue.js applications.

Features:

Smooth transitions
Auto scroll while dragging
Supports nested structures
Lightweight (~4kb gzipped)
Supports touch events

How to use it:

1. Import the dnd-zone component.

import VueDndZone from 'vue-dnd-zone'
import 'vue-dnd-zone/vue-dnd-zone.css'

2. Add draggable items to the dnd zone.

<dnd-zone>
  <dnd-container>
    <dnd-item>
      <!-- item markup goes here -->
    </dnd-item>
  </dnd-container>
</dnd-zone>

3. Possible props.

validate:{
  type: Function,
  default: function(item, container, zone){
    if(item && container && zone){
      return true
    }
  }
},
mirrorMinHeight:{
  type: Number,
  default: 150,
},
mirrorMaxWidth:{
  type: Number,
  default: 500,
},
calcInterval:{
  type: Number,
  default: 150,
},
lockDistance:{
  type: Number,
  default: 25,
},
shadowAnchor:{
  type: Function,
  default: function(){
    return this.$el
  }
},
mirrorAnchor:{
  type: Function,
  default: function(){
    return this.$el
  }
},
transitionDuration:{
  type: Number,
  default: 0.2,
},
shadowOpacity:{
  type: Number,
  default: 0.5,
},
shadowMargin:{
  type: [Boolean, String],
  default: '0px',
},
shadowPadding:{
  type: [Boolean, String],
  default: false,
},
dragstartBuffer: {
  type: Number,
  default: 50,
},
nativeScroll: {
  type: Boolean,
  default: true,
},
handleClass:{
  type: [Boolean,String],
  default: false
},
pushToLast:{
  type: Boolean,
  default: false
}