How to add new container in JSPlumb dynamically?
I have a JS fiddle here
In this document, I have two containers which have connectors. My query is how can i add a new container which will have connectors like these have green and pink dots on clicking a button.
HTML
<html>
<body>
<button id="aDD" onclick="AddDiv();" style="width:10px;height:10px;" value="Add New Div"></button>
<div>
<div id="a" class="a window" style="width: 100px; height: 100px; border: solid 1px">
</div>
<br>
<div id="b" class="b window" style="width: 100px; height: 100px; border: solid 1px;">
</div>
</div>
</body>
</html>
JQuery
var a = $("#a");
var b = $("#b");
//Setting up drop options
var targetDropOptions = {
activeClass: 'dragActive'
};
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "TopCenter",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor},
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart"],
maxConnections: -1,
isTarget: true,
dropOptions: targetDropOptions
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "BottomCenter",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 8 },
connector: ["Bezier", { curviness: 63}],
maxConnections: -1,
isTarget: true,
dropOptions: targetDropOptions
};
jsPlumb.bind("ready", function () {
//Set up endpoints on the divs
jsPlumb.addEndpoint($(".window"), targetEndpoint);
jsPlumb.addEndpoint($(".window"), sourceEndpoint);
jsPlumb.draggable($(".window"));
});
Answer
Add below JS Function on Button Click
function AddDiv() {
var Div = $('<div>', { id: "X12" },
{ class: 'window ui-draggable' })
.css(
{ height: '100px',
width: '100px',
border: 'solid 1px'
}
).appendTo('body');
jsPlumb.addEndpoint($(Div), targetEndpoint);
jsPlumb.addEndpoint($(Div), sourceEndpoint);
jsPlumb.draggable($(Div));
$(Div).addClass('window');
}
My JSFiddle is here