Drag And Drop Flowchart Builder



Simple flow library.

Drawflow allows you to create data flows easily and quickly.

Installing only a javascript library and with four lines of code.



  • Drag Nodes
  • Multiple Inputs / Outputs
  • Multiple connections
  • Delete Nodes and Connections
  • Data sync on Nodes
  • Zoom in / out
  • Clear data module
  • Support modules
  • Editor mode fixed and edit
  • Import / Export data
  • Events
  • Mobile support
  • Vanilla javascript (No dependencies)
  • NPM
  • Vue Support component nodes && Nuxt


Download or clone repository and copy the dist folder, CDN option Or npm.


git clone https://github.com/jerosoler/Drawflow.git


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>


npm i drawflow


import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'

Create the parent element of drawflow.

<div id="drawflow"></div>


Start drawflow.

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
Parameter Type Description
id Object Name of module
render Object It’s for Vue.

For vue example.

import Vue from 'vue'

// Pass render Vue
this.editor = new Drawflow(id, Vue);


Add to nuxt.config.js file

build: {
    transpile: ['drawflow'],

Mouse and Keys

  • del key to remove element.
  • Right click to show remove options (Mobile long press).
  • Left click press to move editor or node selected.
  • Ctrl + Mouse Wheel Zoom in/out (Mobile pinch).


You can change the editor to fixed type to block. Only editor can be moved. You can put it before start.

editor.editor_mode = 'edit'; // Default
editor.editor_mode = 'fixed'; // Only scroll

You can also adjust the zoom values.

editor.zoom_max = 1.6;
editor.zoom_min = 0.5;


Separate your flows in different editors.

// Default Module is Home

RemovedModule if it is in the same module redirects to the Home module


Adding a node is simple.

editor.addNode(name, inputs, outputs, posx, posy, class, data, html);
Parameter Type Description
name text Name of module
inputs number Number of de inputs
outputs number Number of de outputs
pos_x number Position on start node left
pos_y number Position on start node top
class text Added classname to de node
data json Data passed to node
html text HTML drawn on node or name of register node.
typenode boolean & text Default false, true for Object HTML, vue for vue

You can use the attribute df-* in inputs, textarea or select to synchronize with the node data.

Atrributs multiples parents support df-*-*...

Node example

var html = `
<div><input type="text" df-name></div>
var data = { "name": '' };

editor.addNode('github', 0, 1, 150, 300, 'github', data, html);

Register Node

it’s possible register nodes for reuse.

var html = document.createElement("div");
html.innerHTML =  "Hello Drawflow!!";
editor.registerNode('test', html);
// Use
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'test', true);

// For vue
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use for vue
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');
Parameter Type Description
name text Name of module registered.
html text HTML to drawn or vue component.
props json Only for vue. Props of component. Not Required
options json Only for vue. Options of component. Not Required


Other available functions.

Mehtod Description
zoom_in() Increment zoom +0.1
zoom_out() Decrement zoom -0.1
getNodeFromId(id) Get Info of node. Ex: id: 5
getNodesFromName(name) Return Array of nodes id. Ex: name: telegram
removeNodeId(id) Remove node. Ex id: node-x
addConnection(id_output, id_input, output_class, input_class) Add connection. Ex: 15,16,'output_1','input_1'
updateConnectionNodes(id) Update connections position from Node Ex id: node-x
removeConnectionNodeId(id) Remove node connections. Ex id: node-x
getModuleFromNodeId(id) Get name of module where is the id. Ex id: 5
clearModuleSelected() Clear data of module selected
clear() Clear all data of all modules and modules remove.

Methods example



You can detect events that are happening.

List of available events:

Event Return Description
nodeCreated id id of Node
nodeRemoved id id of Node
nodeSelected id id of Node
nodeMoved id id of Node
connectionCreated { output_id, input_id, output_class, input_class } id’s of nodes and ouput/input selected
connectionRemoved { output_id, input_id, output_class, input_class } id’s of nodes and ouput/input selected
moduleCreated name name of Module
moduleChanged name name of Module
moduleRemoved name name of Module
mouseMove { x, y } Position
zoom zoom_level Level of zoom
translate { x, y } Position translate editor
import import Finish import

Events example

editor.on('nodeCreated', function(id) {
  console.log("Node created " + id);

Export / Import

You can export and import your data.

var exportdata = editor.export();

Export example

Example of exported data:

    "drawflow": {
        "Home": {
            "data": {}
        "Other": {
            "data": {
                "16": {
                    "id": 16,
                    "name": "facebook",
                    "data": {},
                    "class": "facebook",
                    "html": "\n        
 Facebook Message
\n        ",
                    "inputs": {},
                    "outputs": {
                        "output_1": {
                            "connections": [
                                    "node": "17",
                                    "output": "input_1"
                    "pos_x": 226,
                    "pos_y": 138
                "17": {
                    "id": 17,
                    "name": "log",
                    "data": {},
                    "class": "log",
                    "html": "\n            
 Save log file
\n            ",
                    "inputs": {
                        "input_1": {
                            "connections": [
                                    "node": "16",
                                    "input": "output_1"
                    "outputs": {},
                    "pos_x": 690,
                    "pos_y": 129


View the complete example in folder docs.

Download Details:

Author: jerosoler

Live Demo: https://jerosoler.github.io/Drawflow/

GitHub: https://github.com/jerosoler/Drawflow

#css #javascript

What is GEEK

Buddha Community

Drag And Drop Flowchart Builder
Nina Diana

Nina Diana


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.

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.


  • 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 .


  • 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

#vue #vue-drag #vue-drop #drag-and-drop #vue-drag-and-drop

Drag and Drop File Upload Using Dropzone js in Laravel 8

Hello Friends,

In this tutorial i will show you Drag and Drop File Upload Using Dropzone js in Laravel 8 using dropzone.js. DropzoneJS is an open source library that provides drag and drop file uploads with image previews.

Read More : Drag and Drop File Upload Using Dropzone js in Laravel 8


Read Also : Google Recaptcha Example In Laravel


Read Also : Send Mail Example In Laravel 8


#drag and drop file upload using dropzone js in laravel 8 #laravel 8 #file upload #dropzone js #drag and drop #multiple files upload

Hertha  Mayer

Hertha Mayer


Drag and drop file uploading with .NET 5.0 Blazor InputFile component

One of my pet projects requires file uploading. And because I decided to create that application to be .NET 5.0 ready, it was necessary to investigate what options do we have for file uploading with .NET 5.0 Blazor applications. The first candidate to investigate is a new InputFile component, of course. So, let’s see what it can do for us.

Installing .NET 5.0 SDK

You have to download and install a fresh version of .NET 5.0 SDK. At the moment when I’m writing this post, the SDK 5.0.100-rc.1 is available. But, probably, at the moment when you read this blog, there is a fresher version of SDK, so use it.

Creating ASP.NET Core Blazor Server application project

This time I’m going to create a Blazor Server project because I want my application can upload files to somewhere and I want it can generate links to the uploaded files. It seems to me, a Blazor Server application is most convenient for this.

So, just put the next command to your console

dotnet new blazorserver -o BlazorUploads

This time my choice is the Visual Studio 16.8.0 Preview 3.2 as an IDE. But, as usual, you can use any IDE that supports developing Blazor projects.

Clean Up

Completely remove the files and directories selected on the image below.

In the NavMenu.razor component delete the next lines of code

<li class="nav-item px-3">
    <NavLink class="nav-link" href="counter">
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
          Fetch data

In the Startup.cs remove the row where the WeatherForecastService is added in the ConfigureServices() method

services.AddSingleton**<** WeatherForecastService**>()** ;

And finally, remove almost all content of the_ Index.razor_ page, except the first line.

@page “/”

#posts #.net 5.0 #blazor #blazor server #component #drag and drop #drop #file #inputfile #uploading

Jack Salvator

Jack Salvator


10+ Best Drag & Drop WordPress Page Builders in 2021

Looking for a simple way to build and customize your WordPress site? That’s where drag and drop WordPress page buildersplugins are available handy. WordPress page builders allow you to make, edit, and customize your website layout without writing any code.

#drag & drop wordpress page builders

Oleta  Orn

Oleta Orn


A drag and drop implementation for Vue.js 2

Easy-DnD is a drag and drop implementation for Vue.js 2 that uses only standard mouse events instead of the HTML5 drag and drop API, which is impossible to work with. Think of it as a way to transfer data from some components to others using the mouse or support for a mouse assisted copy/cut - paste. It also allows for lists to be reordered by drag and drop.

#drag #drop #vue #vue-js