When you need to cre­ate schem­at­ics or dia­grams in your webap­plic­a­tion, or have your user cre­ate these, jsPlumb is a won­der­ful lib­rary to use. An example of a use case for some­thing like this is hav­ing the user cre­ate a flow dia­gram for a pro­cess he or she is modeling.

In the pre­vi­ous art­icle in this series, we made some divs that the user could con­nect using jsPlumb. Only con­nect­ing a few pre­defined items is not very use­ful. In this art­icle we will see how to have the user add new items and how to make them draggable.

Setting up

We start with the code from the pre­vi­ous art­icle, but without the pre­defined divs. Instead, we add a con­tainer for all the items that the user can add. The user will not be able to drag the new items out­side of the con­tainer. The code we start with is shown below. 

Adding new items

Now that we have an empty con­tainer, the first thing we want to do is enable the user to add new items to it. A new item will be added to the con­tainer when the user double­clicks it. This is what the code below shows.

Let’s see what this code does line by line.

Line 3: Here we tell jsPlumb which DOM ele­ment to use as con­tainer. jsPlumb will add all DOM ele­ments to this con­tainer. When you don’t spe­cify this, all DOM ele­ments will be added at the end of the body of your doc­u­ment. Sometimes, this can cause strange beha­viour, so it’s best to always spe­cify a container.

Line 5: We set a vari­able to keep track of the num­ber of states. This is used solely for the sake of this demo, so that we can give each state a unique id. In your pro­duc­tion code you will need to find a more solid way of gen­er­at­ing id’s for each state. I only use one here to keep this demo simple.

Lines 8–11: This code cre­ates the divs that com­prise the new state. The user needs to be able to drag the state, but also to cre­ate a new con­nec­tion from the state. To identify which of these two actions the user wants to per­form, we cre­ate two divs. The title div can be used to drag the state, while the con­nect div can be used to con­nect the state to another state. Later, we will add both divs to the state div.

Lines 13–16: This piece of CSS makes sure that the new state is added to the con­tainer at the pos­i­tion of the mouse cursor, where the user expects it.

Lines 18–21: We now add the title and con­nect divs to the new state div, which is then added to the container. 

Lines 23–25: We tell jsPlumb that this new state needs to be able to receive con­nec­tions. We have seen how this works in part 1 of this series.

Lines 27–30: Pay atten­tion to line 20. The con­nect div is the source for new con­nec­tions, not the state div. A new con­nec­tion from a state can now be made by drag­ging from the con­nect div. To tell jsPlumb that we do want the con­nec­tion to ori­gin­ate from the state div, and not from the con­nect div, we add the parent para­meter in line 21. This refers to our newly made state div.

Line 32:We incre­ment the iden­ti­fier for new states.

Before this code works, we need to alter the style sheet a bit. We need to add new styles for the title and con­nect divs.

We also need to give each new item an abso­lute pos­i­tion. This is very import­ant. When we do not do this, the new items will not appear cor­rectly in the con­tainer, and will not be draggable.

Dragging and removing items

As you may have noticed, the new items can­not be dragged nor removed. To enable this, we need to add some code to the double click method of our container.

Lines 1–3: These lines tell jsPlumb that the new state needs to be drag­gable. The containment para­meter makes sure that the states can­not be dragged out­side of the con­tainer div.

Line 5: To remove a state, we first need to detach all con­nec­tions. When we do not do this, they will keep hov­er­ing around while one of their states is missing.

Line 6–7: We remove the div from the page and stop the propaga­tion so that other event hand­lers will not fire.

We now have a small work­ing applic­a­tion that enables our users to cre­ate simple diagrams.

Download code

Download the code for this example from GitHub

All articles about jsPlumb

Further reading

After read­ing this art­icle, head over to the jsPlumb demos to see what this frame­work can do. There is a lot more than we have seen in this art­icle! Head over to the doc­u­ment­a­tion to have a look at how some of the other things work.

Revision history

10 February 2013: Original article.
14 August 2014: Updated to reflect the new­est ver­sions of jsPlumb and jQuery.
17 September 2014: Added jsPlumb.setContainer. Thanks to Joel Kuntz for spot­ting this error.