Drag And Drop Functionality For Vue.js – 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
}

Preview:

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

Download Details:

Author: supraniti

Live Demo: https://supraniti.github.io/vue-dnd-zone/

Download Link: https://github.com/supraniti/vue-dnd-zone/archive/master.zip

Official Website: https://github.com/supraniti/vue-dnd-zone

Install & Download:

# Yarn
$ yarn add vue-dnd-zone

# NPM
$ npm i vue-dnd-zone

You Might Be Interested In:

Add Comment