Drag And Drop Flowchart Builder

Drawflow

Simple flow library.

Drawflow allows you to create data flows easily and quickly.

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

LIVE DEMO

Features

• 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

Installation

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

Clone

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

CDN

<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

npm i drawflow

Import

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

Create the parent element of drawflow.

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

Running

Start drawflow.

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();

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);

Nuxt

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

Editor

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;

Modules

Separate your flows in different editors.

editor.addModule('nameNewModule');
editor.changeModule('nameNewModule');
editor.removeModule('nameModule');
// Default Module is Home
editor.changeModule('Home');

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

Nodes

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

Methods

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

editor.removeNodeId('node-4');

Events

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();
editor.import(exportdata);

Export example

Example of exported data:

{
    "drawflow": {
        "Home": {
            "data": {}
        },
        "Other": {
            "data": {
                "16": {
                    "id": 16,
                    "name": "facebook",
                    "data": {},
                    "class": "facebook",
                    "html": "\n        
\n          
 Facebook Message
\n        
\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            
\n              
 Save log file
\n            
\n            ",
                    "inputs": {
                        "input_1": {
                            "connections": [
                                {
                                    "node": "16",
                                    "input": "output_1"
                                }
                            ]
                        }
                    },
                    "outputs": {},
                    "pos_x": 690,
                    "pos_y": 129
                }
            }
        }
    }
}

Example

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

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.

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

#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

https://websolutionstuff.com/post/drag-and-drop-file-upload-using-dropzone-js-in-laravel-8

---

Read Also : Google Recaptcha Example In Laravel

https://websolutionstuff.com/post/google-recaptcha-example-in-laravel

---

Read Also : Send Mail Example In Laravel 8

https://websolutionstuff.com/post/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

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">
          Counter
    </NavLink>
</li>
<li class="nav-item px-3">
    <NavLink class="nav-link" href="fetchdata">
          Fetch data
    </NavLink>
</li>

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

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

A drag and drop implementation for Vue.js 2

Easy-DnD
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