Me Myself and I

If you asked my opinion about Multidimensional arrays, 3 or 4 years ago, I would have said that they were the most simplistic concept to grasp but the most complicated to implement since this is what pops into my mind as soon as I think of a Multidimensional Array That was ages ago before I discovered the most easiest way, as easy as understanding multidimensional arrays, to implement them. Well, maybe some of you may already be well aware and this might sound like a trivial task, there is a percentage that needs clarification in this concept like I did 4 years ago. So buckle up, here we go. Let's start off with the very basics. What's an Array? The primitive definition of arrays simply stated that " Arrays were a storage medium that could hold a fixed number of values of a single type" . While this is partially true, it not the case anymore. Considering the programming language that I've chosen at hand, I think we can expand this definition an...

Removing the connections along with the parent element can be  little tricky if not correctly handled. This requires the maintenance of information regarding a connections source and target.  In order to do so, we'll be using an array called 'list'. The list array is a two- dimensional array instantiated with the number of connections at the time of deletion of a parent element.  An event listener will be called when the user clicks on the cancel icon of an element, as shown below. (I've tried as far as possible to simplify each and every code line via comments) The reason to declare the list array within the call to delete listener is the fact that there is no viable place other than this that could assure that the user has fully completed connecting as desired, plus there is little to no concern regarding this details up till an element needs to be deleted( up till what we've covered in this context, but the c...

Now to spice things up, we'll be adding a delete button that removes the dropped clone from the canvas. This is a fairly easy and simple task. After adding the 'pro' class to a new division and creating the framework for the droppable element, we'll have to append the icon image to the element before it gets appended to th canvas. This is done by piping the append command to the following line. Or it can also be done in a separate command line. var newAgent = $ ( '<div>' ). attr ( 'id' , 'pro' + i ). addClass ( 'pro' ); newAgent . text ( 'Element ' + i ). append ( '<img class="cancel" src="../img/delete.ico"  width="25px" height="25px" />' ) ; //rest of the code Lastly, rather than using a double click to get rid of the clone on the canvas, an event listener is used as follows with pretty much the same internal working to delete the element . ne...

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 ++; ...

Hi there, We' ve discussed the jsPlumb facility to Drag and drop objects in my previous post.  Here I've jotted out the way to manipulate the elements dropped onto a canvas without creating replicates of itself. In order to do so, firstly create an additional class definition in your CSS file or simply add the following to the <style> segment in the in the <head> section of your view. . ch { position : absolute ; cursor : pointer ; width : 72 px ; height : 80 px ; background-image : url ( "../dist/img/bigdot.png" ); }   The next and the final step is to squeeze in a few lines of code to your JS file. Within the droppable function, first we create the clone of the tool/ image as discussed in this context, as the 'droppedElement'. Then we add these following lines of code.   Since jsPlumb does not provide support for jQuery, the ui.helper class needs ti be removed. By adding the class "ch" to the drop...