10 Best Vue Drag and Drop Component For Your App

10 Best Vue Drag and Drop Component For Your App

Vue Drag and drop is a feature of many interactive web apps. It provides an intuitive way for users to manipulate their data. Adding drag and drop feature is easy to add to Vue.js apps.

Vue Drag and drop is a feature of many interactive web apps. It provides an intuitive way for users to manipulate their data. Adding drag and drop feature is easy to add to Vue.js apps.

Here are 10 vue drop components that contribute to the flexibility of your vue application.

1. Vue.Draggable

Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.

Based on and offering all features of Sortable.js

Demo: https://sortablejs.github.io/Vue.Draggable/#/simple

Download: https://github.com/SortableJS/Vue.Draggable/archive/master.zip

2. realtime-kanban-vue

Real-time kanban board built with Vue.js and powered by Hamoni Sync.

Demo: https://dev.to/pmbanugo/real-time-kanban-board-with-vuejs-and-hamoni-sync-52kg

Download: https://github.com/pmbanugo/realtime-kanban-vue/archive/master.zip

3. vue-nestable

Drag & drop hierarchical list made as a vue component.

Goals

  • A simple vue component to create a draggable list to customizable items
  • Reorder items by dragging them above an other item
  • Intuitively nest items by dragging right
  • Fully customizable, ships with no css
  • Everything is configurable: item identifier, max nesting level, threshold for nesting

Demo: https://rhwilr.github.io/vue-nestable/

Download: https://github.com/rhwilr/vue-nestable/archive/master.zip

4. VueDraggable

VueJS directive for drag and drop.

Native HTML5 drag and drop implementation made for VueJS.

Demo: https://vivify-ideas.github.io/vue-draggable/

Download: https://github.com/Vivify-Ideas/vue-draggable/archive/master.zip

5. vue-grid-layout

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout

Demo: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html

Download: https://github.com/jbaysolutions/vue-grid-layout/archive/master.zip

6. vue-drag-tree

It's a tree components(Vue2.x) that allow you to drag and drop the node to exchange their data .

Feature

  • Double click on an node to turn it into a folder
  • Drag and Drop the tree node, even between two different levels
  • Controls whether a particular node can be dragged and whether the node can be plugged into other nodes
  • Append/Remove Node in any level (#TODO)

Demo: https://vigilant-curran-d6fec6.netlify.com/#/

Download: https://github.com/shuiRong/vue-drag-tree/archive/master.zip

7. VueDragDrop

A Simple Drag & Drop example created in Vue.js.

Demo: https://seregpie.github.io/VueDragDrop/

Download: https://github.com/SeregPie/VueDragDrop/archive/master.zip

8. Vue-drag-resize

Vue Component for resize and drag elements.

Demo: http://kirillmurashov.com/vue-drag-resize/

Download: https://github.com/kirillmurashov/vue-drag-resize/archive/master.zip

9. vue-smooth-dnd

A fast and lightweight drag&drop, sortable library for Vue.js with many configuration options covering many d&d scenarios.

This library consists wrapper Vue.js components over smooth-dnd library.

Show, don't tell !

Demo: https://kutlugsahin.github.io/vue-smooth-dnd/#/cards

Download: https://github.com/kutlugsahin/vue-smooth-dnd/archive/master.zip

10. vue-dragula

Drag and drop so simple it hurts

Demo: http://astray-git.github.io/vue-dragula/

Download: https://github.com/Astray-git/vue-dragula/archive/master.zip

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Vue Drag and Drop Mobile Website

Vue Drag and Drop Mobile Website

Vue component for drag-and-drop to design and build mobile website.

vue-page-designer

A drag-and-drop mobile website builder base on Vue.

Install

yarn add vue-page-designer

You can start it quickly, in main.js:

import Vue from 'vue';
import vuePageDesigner from 'vue-page-designer'
import 'vue-page-designer/dist/vue-page-designer.css'
import App from './App.vue';

Vue.use(vuePageDesigner);

new Vue({
  el: '#app',
  render: h => h(App)
});

Next, use it:

<template>
  <div id="app">
    <vue-page-designer />
  </div>
</template>

<style>
#app {
  height: 100%;
}
</style>
Options

You can add custom components, save callback.

Props Type Description
value Object Editor initial value, you can pass the value of the save callback and resume the draft
widgets Object Vue Components. Custom components for editor. see Example
save (data) => void When you click the Save button, feed back to you to save the data
upload (files) => Promise Editor upload function, allowing you to implement your own upload-file's request

Parameter: value

The value came from save.

<template>
  <div id="app">
    <vue-page-designer :value="value" />
  </div>
</template>

Parameter: widgets

You can install default widget in vue-page-designer-widgets

yarn add vue-page-designer-widgets

Import and use it

<template>
  <div id="app">
    <vue-page-designer :widgets="widgets" />
  </div>
</template>
<script>
import widgets from './widgets'

export default {
  data () {
    return {
      widgets
    }
  }
}
</script>

Parameter: save

<template>
  <div id="app">
    <vue-page-designer @save="(data) => { console.log('send the value data to your server', data) }" />
  </div>
</template>

Parameter: upload

<template>
  <div id="app">
    <vue-page-designer :upload="upload" />
  </div>
</template>
<script>
export default {
  methods: {
    upload (files) {
      return yourApiUpload(files).then(res => {
        return res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
Demo Download

Build a Drag and Drop App with Vue.js

Build a Drag and Drop App with Vue.js

VueJS Drag & Drop tutorial. Build a Drag and Drop App with Vue.js. Learn how to make VueJS Drag and Drop components. Learn about drag and drop event listeners to create a Trello like drag and drop system in VUE! Drag and drop is a feature which you will find in all kind of apps on both mobile and web.

Easy VueJS Drag & Drop tutorial

Learn how to make VueJS Drag and Drop components

In this video we learn about drag and drop event listeners to create a Trello like drag and drop system in VUE!

How to Build Drag and Drop blocks using Vue-js

How to Build Drag and Drop blocks using Vue-js

Drag and drop is a feature of many interactive web apps. It provides an intuitive way for users to manipulate their data. Adding drag and drop feature is easy to add to Vue.js apps.

On my last project I was asked to build an interface where people could create and manage a travel plan, adding places to visit (articles in the website) and combining them with a date block and a text block. The interface also allows to sort the blocks in order to arrange them at the user will.

In the past, I would address the drag and drop UI effect with the jQuery UI library. Although it was possible to handle everything with jQuery UI and jQuery itself, the code got messy almost all the times.

But, because I currently handle all my UI needs with Vue.js, jQuery is not an option anymore.

Approaching the project moment where I would start to address the drag and drop Interaction with Vue.js, I searched for already made Vue.js components that would allow me to finish this job quickly. As always there are a lot of ready to use plugins and components, most of them based on other JavaScript libraries that implement the HTML5 drag and drop API.

One of them that capture my attention was the Shopify’s Draggable library. It looks very solid and complete. I found this article in Medium where Ali Kamalizade was creating a custom directive to integrate the Draggable library in the Vue.js environment.

It looked so simple that I preferred to skip the ready to use approach and jump into building my own directive v-sortable. I also decided to follow this approach as I would need to sync the DOM manipulation done in the Vue.js component with the Vuex store, where the blocks list state was stored.

Instead of using the Draggable library I decided to use the Sortable library which seems to be more actively maintained.

Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.

It all starts with installing the library into your project:

$ npm install sortablejs --save
My sortable Vue directive

Vue already comes with a default set of directives like v-model and v-for, but it allows you to create your own custom directives. This is special because it makes it possible to completely abstract the js library used to do the drag&drop heavy lifting from our own project code. For example, I started the implementation with the Shopify’s Draggable lib and in the end, I replaced by SortableJs, by just tweaking the custom directive. All the other code on my componenents and store remained untouched.

So, the goal here is to write some code that allows the use of the v-sortable="options" directive on my own component and let the drag&drop magic happens.

import Sortable from 'sortablejs/modular/sortable.core.esm.js';
const SortableDirective = {
    inserted( el, binding, vnode ) {
        let options = binding.value;
        options.onUpdate = (e) => vnode.data.on.sorted( e );
        const sortable = Sortable.create( el, binding.value );
    }
};
export default SortableDirective;

This custom directive accepts an options object which contains the options to configure the sortable library. I’m also hooking on the onUpdate event and sending it to the component so it would be possible to trigger the change on my Vuex store, thus keeping the DOM and the store in sync. This is important so that the user could save the travel plan after reordering the blocks at his own will.

Component usage

Now that we have a directive, this is how I’m using it on my project component’s template:

<template>

...

<div v-sortable="$options.sortOptions" @sorted="handleSorted">
    <component v-for="item in blocks" :key="item.uid" :block="item" :is="blockType(item)"></component>
</div>

...

</template>

and the script:

<script>
...

import Sortable from '../directives/sortable';

const sortOptions = {
    draggable: ‘.js-sortable-block’,
    handle: ‘.js-drag-handle’
};

export default {
    sortOptions,
    directives: { Sortable },
    methods: {
        handleSorted( event ) { 
            this.$store.commit('sortBlocks', event );
        }
    },
    computed: {
       blocks() {
           return this.$store.state.blocks;
       }
    }
}

</script>

At this point the blocks wrapped by div.js-sortable-block are sortable. The user is able to grab each block by the handle .js-drag-handle and move it around the list.

The last piece of code we need is to mutate the state of the blocks on the Vuex store. After each user’s drag and drop interaction, the component gets the event sorted which triggers the component’s method handleSorted which commits a mutation sortBlocks on my Vuex store:

state: {
    blocks: [],
},
mutations: { 
    sortBlocks( state, e ) {
         if( e.oldIndex === e.newIndex ) {
             return;
         }
         let temp = state.blocks.splice( e.oldIndex, 1 );
         state.blocks.splice( e.newIndex, 0, temp[0] );
    }
}

The mutation changes the blocks indexes so it keeps the interaction in sync with the blocks state.

This is how I manage to integrate a ready-to-use Sortable JavaScript library with my Vue project. The custom directive v-sortable abstracts the complexity of the library from my own project and makes it possible to reuse it on other projects without having to go deep into the components code and look for the specifics.

I think you agree that we live in good times, where something like a drag & drop interaction is addressed easily.

Thank you for reading!