Posts

Showing posts from May, 2016

Deleting an Element upon button/icon click

Image
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...
Post a Comment
Read more

Creating a variety of elements in the toolbox (jsPlumb)

Image
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...
Post a Comment
Read more

Interactive Model creation using jsPlumb

Image
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               ...
Post a Comment
Read more

Creating connections between Elements in jsPlumb

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 ++; ...
Post a Comment
Read more

jsPlumb - Drag and Drop Multiple Elements

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...
Post a Comment
Read more

jsPlumb - Dragging a Clone

Image
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...
Post a Comment
Read more