Vue.js Plugin for Drag and Drop Functionality

vue-dnd-zone is a vue.js plug-in for drag-and-drop functionality. It’s not an external js library wrapper, but a set of Vue components that manage the drag-and-drop event and state of the data model.

vue js drag and drop example, vue drag and drop list, vue drag and drop page builder, drag and drop vuetify, html drag and drop example, javascript drag and drop example

Features

Smooth transitions
Auto-scroll while dragging
Supports nested structures
Lightweight (~4KB compressed)
Supports touch events

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-dnd-zone

# NPM
$ npm i vue-dnd-zone

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
}

Drag And Drop Functionality, vue-dnd-zone Plugin/Github, drag and drop in javascript