Creating connections between Elements in jsPlumb

In my previous posts we've gone through creating a toolbox and canvas from which elements can be dragged from and dropped onto. Then we took a look at eliminating the replication of elements whenever a dropped clone was dragged within the canvas. So now let's move onto creating basic connections between these dropped elements using jsPlumb and jQuery-UI.

Starting off with the code previously dealt with, creating connections requires only the addition of a few lines of code to your JS code.

The droppable function part of the code has been shown below.

Step 1:

Assign a unique ID for each element being dropped on the canvas. Though jsPlumb will automatically assign an ID when you don't supply one, it is easier to manipulate the elements when you define an ID. This ID can be a simple digit or even a complex string( But remember, jsPlumb treats all IDs as strings).

//Set a unique ID for each dropped Elementvar indexer = 0;
function setId(element){
    indexer++;
    element.attr("id",indexer);

}

A Method to set an ID for the element should be called upon only after the element is appended to the drop area since it literally doesn't exist before that.

setId(droppedElement);

Step 2:

Create endpoints which are anchors on the element as they are being appended to the canvas. Connections will be dragged and dropped from these anchors.

var common = {
            isSource:true,
            isTarget:true,
            connector: ["Flowchart"],
        };

        jsPlumb.addEndpoint(droppedId, {
            anchors:["Right"],
            maxconnections:100        }, common);

        jsPlumb.addEndpoint(droppedId, {
            anchors:["Left"],
            maxConnections:100        }, common);

Step 3:

Specify the maximum number of connections you wish to permit per source or target element. When you don't specify this, only single connections will be permitted by default.

maxConnections:100

The complete droppable function code is shown below.

$("#dropArea").droppable({
    accept : '.ctoolbox',
    containment : 'dropArea',

drop : function (e, ui) {
        droppedElement = ui.helper.clone();
        ui.helper.remove();
        $(droppedElement).removeAttr("class");
        jsPlumb.repaint(ui.helper);
        $(droppedElement).addClass("ch");
        $(droppedElement).draggable({containment: "dropArea"});
        $(droppedElement).appendTo('#dropArea');
        setId(droppedElement);
        var droppedId = $(droppedElement).attr('id');
        var common = {
            isSource:true,
            isTarget:true,
            connector: ["Flowchart"],
        };

        jsPlumb.addEndpoint(droppedId, {
            anchors:["Right"],
            maxconnections:100        }, common);

        jsPlumb.addEndpoint(droppedId, {
            anchors:["Left"],
            maxConnections:100        }, common);

        alert("My connections" +jsPlumb.getAllConnections());

        //Delete an element on double click         

        var dataToPass = {msg: "Confirm deletion of Item"};
        $(droppedElement).dblclick(dataToPass, function(event) {
            alert(event.data.msg);
            $(this).remove();
        });
    }
});

//Set a unique ID for each dropped Elementvar indexer = 0;
function setId(element){
    indexer++;
    element.attr("id",indexer);

}