I am attempting to create a jsplumb group and then dynamically add nodes to it. However, I have encountered an issue where the documentation states that a node must be created first before being added to the group. In my case, I need to add the group first and then drag and drop the node. Both the group and the nodes should belong to the same jsplumb instance in order to save their values.
The following code is from the main documentation:
HTML
<!doctype html>
<html>
<head>
<title>jsPlumb - groups demonstration</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-defaults.css">
<link rel="stylesheet" href="../../css/main.css">
<link rel="stylesheet" href="../../css/jsplumbtoolkit-demo.css">
<link rel="stylesheet" href="demo.css">
</head>
<body data-demo-id="groups">
<a style="margin:10px 0 0 10px;display:inline-block" href="https://jsplumbtoolkit.com"><img src="../../img/logo-jsplumb-green.png"></a>
<div class="jtk-demo-main">
<!-- demo -->
<div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">
<!-- Group containers with nodes -->
</div>
<!-- /demo -->
<!-- explanation -->
<div class="description">
<h4>GROUPS</h4>
<p>Demonstrates all of the ways you can use Groups.</p>
</div>
<!-- /explanation -->
</div>
<!-- JS -->
<script src="../../dist/js/jsplumb.js"></script>
<!-- groups -->
<script src="../../src/group.js"></script>
<script src="../demo-list.js"></script>
<script src="demo.js"></script>
</body>
</html>JavaScript
jsPlumb.ready(function () {
// JavaScript logic for creating groups and adding nodes goes here
});
CSS
.w {
/* CSS styles for draggable nodes */
}
.group-container {
/* CSS styles for group containers */
}
/* Additional CSS styles */
The functionality involves populating drag-and-drop nodes on the sides and cloning the logic accordingly.