Creating a variety of elements in the toolbox (jsPlumb)

Previously we've come up to a point where we can create interactive connections between a single kind of dropped elements. Now, let's move on to creating multiple tools inside the toolbox that can be dropped onto and manipulated within the canvas. 

For this example, let's consider two elements since the same method is applicable to any number of tools you wish to include.

Step 1: 

Create another division within the body section of the view/ html file to hold the draggable element.

(query is the new division added here)

<div class="project" id="cId">
</div>
<div class="query" id="rId">
</div>
<div id="container">
</div> 

Step 2:

In the stylesheet include the style preferred for this newly created tool/division

.query {
    border-style: outset;
    text-align: center;
    width: 130px;
    height: 72px;
    background-color: powderblue;
    position: absolute;
}

.que {
    border: 1px solid gray;
    text-align: center;
    width: 130px;
    height: 72px;
    background-color:  powderblue;
    position: absolute;
}

Step 3: 

In the Javascript file create another draggable method with (almost  always the same)  properties desired.

$(".query").draggable({
    helper : 'clone',
    cursor : 'pointer',
    tolerance : 'fit',
    revert : true
});

Step 4: 

In the droppable function, include the new class to be accepted. In this case, at present, though we are able to drop two different elements, after they've been dropped on the canvas, the clones created act similarly. 

$("#container").droppable({
    accept: '.project, .query',
    containment: 'container',

    drop: function (e, ui) {

          //rest of the code

Step 5: 

All set to go!

The Pink and the Blue rectangles represent two different tools and the elements were created by dropping both the tools on the canvas, though the difference in indistinguishable.