Interactive Model creation using jsPlumb

We have been able to create simple connections between elements dropped o the canvas. Her below, we'll be looking at ways to create sub divisions of a single element so that each subdivision will be eligible to connect to another subdivision, either from its own element or from another element.

Elements and Classes:

dropArea    :    Canvas where elements will be manipulated
connector   :    Subdivision of the element from which a connection will be
element      :    The toolbox from which an element will be dragged
pro            :     The class that replicated the elements style but not the
                       behavior. This will be dropped as a clone on the canvas
section       :     Subdivision of the element that indicated the subdivision

Sample Model Created

 Code :

<!doctype html>

    <script src="../lib/jquery.min.js"></script>
    <script src=""></script>
    <script src="../lib/jquery-ui.min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.4.1-all-min.js"></script>
    <script src="../lib/jquery.jsPlumb-1.6.4-min.js"></script>


        @import url(;

        * {
            font-family: 'Montserrat', sans-serif;
        #dropArea {
            position: relative;
            resize: both;
            margin-left: 180px;
            border: 1px solid #aaaaaa;
            width: 800px;
            height: 650px;
            overflow-x: scroll;
            overflow-y: scroll;
        .title {
            padding: 10px;
            cursor: move;
        .connector {
            text-align: center;
            width: 100%;
            height: 20px;
            background-color: #ffffff;
            cursor: pointer;
        .element {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color: lightpink;
            position: absolute;
        .pro {
            border: 1px solid gray;
            text-align: center;
            width: 170px;
            height: 75px;
            background-color:  lightpink;
            position: absolute;
        .section {
            font-size: 12px;
            text-align: center;
            font-weight: 200;
            border: 1px solid black;
            background-color: #ddddff;




<div class="element" id="cId">
<div id="dropArea">


    jsPlumb.ready(function() {

        jsPlumb.Defaults.PaintStyle = { strokeStyle:"palevioletred", lineWidth:2
        dashstyle: '3 3'};
        jsPlumb.Defaults.EndpointStyle = { radius:7, fillStyle:"palevioletred" };
        jsPlumb.importDefaults({Connector : [ "Bezier", { curviness:50 } ]});
        var i = 1;
        $(".element").draggable        ({
            helper : 'clone',
            cursor : 'pointer',
            tolerance : 'fit',
            revert : true

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

            drop: function (e, ui) {
                droppedElement = ui.helper.clone();

                var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
                newAgent.text('Element ' + i);
                $(droppedElement).draggable({containment: "dropArea"});

                jsPlumb.draggable(newAgent, {
                    containment: 'parent'                });

        $("#dropArea").on('click', '.pro', function (e) {
            var newState = $('<div>').attr('id', 'state' + i).addClass('section').
            text('Section '+ (i-1));

            var title = $('<div>').addClass('title');
            var connect = $('<div>').addClass('connector').
            text('Click here to drag');

                'top': e.pageY,
                'left': e.pageX            });



            jsPlumb.makeTarget(newState, {
                anchor: 'Continuous'            });

            jsPlumb.makeSource(connector, {
                anchor: 'Continuous'            });

            newState.dblclick(function (e) {






In the droppable function we clone the element and and a text to it with its 
ID in order to keep track of the order of element addition onto the canvas.
Note that the dropped element is made draggable within the canvas in the 
jsPlum.draggable function that follows. 

Then we place an EventListener that is called when these dropped elements are clicked. What this Event Listener does is that it creates 2 more divisions,
one where the connection is dragged from/ dropped on, and the 2d division that indicates the ID of that particular subdivision. These divisions will be appended to the element created, on mouse click. 

Following this, source and the target of connections is specified. 

Finally, the element as a whole will be deleted when doubled clicked.


Popular posts from this blog

jsPlumb - Dragging a Clone

jsPlumb - Drag and Drop Multiple Elements

Creating connections between Elements in jsPlumb