This time I will share jQuery Plugin and tutorial about Drag’n’drop Flow Chart Plugin With jQuery And jQuery UI – flowchart.js, hope it will help you in programming stack.
| File Size: | 24.6 KB |
|---|---|
| Views Total: | 53428 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
flowchart.js is a jQuery & jQuery UI based flowchart plugin that enables you to create drag’n’drop flowchart boxes and connect between them with a custom line.
Basic usage:
1. Put the jQuery flowchart.js plugin’s stylesheet in the document’s head section.
1 |
<link href="jquery.flowchart.css" rel="stylesheet"> |
2. Create an empty DIV container for the flowchart.
1 |
<div class="demo" id="example"></div> |
3. The plugin requires jQuery and jQuery UI libraries loaded in the document.
1 |
<script src="jquery.min.js"></script> |
2 |
<script src="jquery-ui.min.js"></script> |
3 |
<script src="jquery.flowchart.js"></script> |
4. Prepare your data for the flowchart. In this case we’re going to draw 2 flowchart boxes on the webpage.
01 |
var data = { |
02 |
operators: { |
03 |
operator1: { |
04 |
top: 20, |
05 |
left: 20, |
06 |
properties: { |
07 |
title: 'Operator 1', |
08 |
inputs: {}, |
09 |
outputs: { |
10 |
output_1: { |
11 |
label: 'Output 1', |
12 |
} |
13 |
} |
14 |
} |
15 |
}, |
16 |
operator2: { |
17 |
top: 80, |
18 |
left: 300, |
19 |
properties: { |
20 |
title: 'Operator 2', |
21 |
inputs: { |
22 |
input_1: { |
23 |
label: 'Input 1', |
24 |
}, |
25 |
input_2: { |
26 |
label: 'Input 2', |
27 |
}, |
28 |
}, |
29 |
outputs: {} |
30 |
} |
31 |
}, |
32 |
} |
33 |
}; |
5. Apply the plugin to the target container.
1 |
$('#example').flowchart({ |
2 |
data: data |
3 |
}); |
6. Default options for the plugin.
01 |
$('#example').flowchart({ |
02 |
03 |
// allows to add links by clicking on lines |
04 |
canUserEditLinks: true, |
05 |
06 |
// enables drag and drop |
07 |
canUserMoveOperators: true, |
08 |
09 |
// custom data |
10 |
data: {}, |
11 |
12 |
// distance between the output line and the link |
13 |
distanceFromArrow: 3, |
14 |
15 |
// default operator class |
16 |
defaultOperatorClass: 'flowchart-default-operator', |
17 |
18 |
// default color |
19 |
defaultLinkColor: '#3366ff', |
20 |
21 |
// default link color |
22 |
defaultSelectedLinkColor: 'black', |
23 |
24 |
// width of the links |
25 |
linkWidth: 10, |
26 |
27 |
// <a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a> of the operators when moved |
28 |
grid: 20, |
29 |
30 |
// allows multiple links on the same input line |
31 |
multipleLinksOnOutput: false, |
32 |
33 |
// allows multiple links on the same output line |
34 |
multipleLinksOnInput: false, |
35 |
36 |
// Allows to vertical decal the links (in case you override the CSS and links are not aligned with their connectors anymore). |
37 |
linkVerticalDecal: 0, |
38 |
39 |
// callbacks |
40 |
onOperatorSelect: function (operatorId) { |
41 |
return true; |
42 |
}, |
43 |
onOperatorUnselect: function () { |
44 |
return true; |
45 |
}, |
46 |
onOperatorMouseOver: function (operatorId) { |
47 |
return true; |
48 |
}, |
49 |
onOperatorMouseOut: function (operatorId) { |
50 |
return true; |
51 |
}, |
52 |
onLinkSelect: function (linkId) { |
53 |
return true; |
54 |
}, |
55 |
onLinkUnselect: function () { |
56 |
return true; |
57 |
}, |
58 |
onOperatorCreate: function (operatorId, operatorData, fullElement) { |
59 |
return true; |
60 |
}, |
61 |
onLinkCreate: function (linkId, linkData) { |
62 |
return true; |
63 |
}, |
64 |
onOperatorDelete: function (operatorId) { |
65 |
return true; |
