Introduction

jsPlumb versions
There are three versions of jsPlumb, depending on which framework your webapplication bases on:

  • Vanilla – This is the standalone version of jsPlumb
  • jQuery – Uses jQuery
  • YUI – Yahoo UI framework
  • MooTools

Please note that from the comming version 1.7.3 only the Vanilla and jQuery-version will be supported, so for new projects you should use one of them! In this tutorial we’ll always use the jQuery-version, as I think it is the most important framework amongst the available.

Let’s get started!
How about a very simple example to get started? I’ll explain it right after the example-code!

Example

    <style>...</style>

    <div id="diagramContainer">
        <div id="item_left"  class="item"></div>
        <div id="item_right" class="item" style="margin-left:50px;"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.5.8/js/jsplumb.min.js"></script>

    <script>
        jsPlumb.ready(function() {
            jsPlumb.connect({
                source:"item_left",
                target:"item_right",
                endpoint:"Rectangle"
            });
        });
    </script>

Play with example »

the first thing to mention is, that we initialize and style the diagram as normal html with divs!
Then we load the current version of jsPlumb.

The next script-block is where our diagram starts drawing the connection between the two div-boxes:

jsPlumb.ready(function() {
  jsPlumb.connect({
    source:"item_left",
    target:"item_right",
    endpoint:"Rectangle"
  });
});

jsPlumb.ready is the method which gets fired, when the document is fully loaded. Yes, some of you see the similarity to jquery ;-)

jsPlumb.connect draws the line between the two divs. The parameters source an target are the id’s of the div, where as the enpoint defines how the ends of the connection-lines look.

Draggable diagram elements

How about making the elements of the previous example draggable? This is actually very easy! The following example shows you, how you can make any element draggable with the method jsPlumb.draggable. Very important is, that any element you want to drag must have the css-attribute position: absolute; set.

Example

<style>.item { position: absolute; }</style>

<body>
  <div id="item_left" class="item"></div>

  <script>
    jsPlumb.ready(function() {
      jsPlumb.draggable("item_left");
    });
  </script>
</body>

Play with example »