Posts

Showing posts with the label class

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

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