Me Myself and I

Previously we've discussed enabling the drag and drop functionalities using the jsPlumb library. Recently, I stumbled upon the interact.js Javascript library, which I found to be as user-friendly as jsPlumb. Below is a short comparison of the two.    Library License Language/Infrastructure Level Built-in editor Github jsPlumb MIT/GPL2 HTML, JavaScript Medium Not Present 2931 stars, 755 forks interact.js MIT Standalone JavaScript Medium Not Present 5452 stars, 351 forks The above details are not presented here to render either one as the bet over the other.  But, in my own experience, I've blended both in my projects utilizing the drag and drop functions for some elements from jsPLumb and the drag and resize function for one element from inter.js. But the only concern when using both the libraries within one function, issues related to the drag function o...

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

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

I've been playing with jsPlumb lately and exploring its features constrained to dragging and dropping objects from a palette onto the canvas. The physical structure of the interface is supposed to have a toolbox( which at present is merely a single image) and a scroll-able canvas onto which the image will be dropped .  Here a user will be permitted to perform multiple drag and drops from the toolbox(image) but the back flow of a dropped element on to the toolbox or outside the canvas is restrained.  Also, the dropped element can be manipulated within the canvas. In this case, starting off with the basics, manipulation of the element deals with only moving the element within the canvas to change its position. But, for further addition of features, manipulation of dropped elements can include re-sizing, adding connectors, property modification via a property console, etc.  The limitation that I came across in this particular piece of code is the self...