Vue.js Plugin for Drag and Drop Functionality | dnd-zone

vue-drag-and-drop-zone

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


See Demo And Download

Official Website(supraniti): Click Here

This superior jQuery/javascript plugin is developed by supraniti. For extra Advanced Usages, please go to the official website.