Me Myself and I

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 : 130 px ; height : 72 px ; background-color : po...

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 manipulate d connector   :    Subdivision of the element from which a connection will be                        made element      :    The toolbox from which an element will be dragged pro            :     The class that replicated the elements style but not the               ...

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 Element var indexer = 0 ; function setId (element){ indexer ++; ...