This time I will share jQuery Plugin and tutorial about Drag And Drop Flowchart Builder – Flowy.js, hope it will help you in programming stack.
Flowy.js is a pretty nice and user-friendly flowchart builder to create responsive, professional flowchart using drag and drop.
Use it for automation software, mind mapping tools, programming platforms, organization charts, family trees, and more.
See It In Action:
More features:
Based on jQuery. Vanilla JavaScript.
- Auto snaps blocks to another one.
- Easy to create your blocks.
- Output the flowchart data as a JS object or JSON string.
How to use it:
1. To get started, include the Flowy.js library on the webpage.
1 |
< link href = "/path/to/flowy.min.css" rel = "stylesheet" /> |
2 |
< script src = "/path/to/flowy.min.js" ></ script > |
2. Create an element to hold the flowchart.
3. Create predefined blocks that can be inserted into the flowchart via drag and drop.
01 |
< div class = "create-flowy" > |
05 |
< div class = "create-flowy" > |
09 |
< div class = "create-flowy" > |
4. Initialize the flowchart builder and done.
1 |
flowy(document.getElementById( "canvas" )); |
5. Event handlers.
01 |
function onGrab(block){ |
09 |
function onSnap(block, first, parent){ |
13 |
function onRearrange(block, parent){ |
17 |
flowy(document.getElementById( "canvas" ), onGrab, onRelease, onSnap, onRearrange); |
6. Set the space between blocks.
3 |
flowy(document.getElementById( "canvas" ), onGrab, onRelease, onSnap, onRearrange, spacing_x, spacing_y); |
7. Get the flowchart data.
4 |
JSON.stringify(flowy.output()); |
8. Remove all blocks from the canvas.
9. Import data into the flowchart.
Changelog:
2020-07-30
- Fixed Dynamic block height indicator
2020-07-29
- Automatically scroll canvas when dragging to edges
2020-06-18
- Parsing block properties on import
2020-05-16
- OnSnap method now returns parent DOM element
2020-04-23
- Fix scroll issue on rearrange
2020-04-18
- Remove “dragging” class after rearranging
2020-04-17
- Fixed error when importing only 1 block
2020-04-15
- Fixed error when importing only 1 block
2019-12-20
2019-12-15
- Removed jQuery dependency.
2019-12-08
- Nested inputs & data attribute in the output
2019-12-03