Getting started

Drag and drop

<html>
  <head>
    <script type="text/javascript" src="../js-graph-it.js"></script>
    <link rel="stylesheet" type="text/css" href="../js-graph-it.css">
    <style>
      .block { position: absolute; }
    </style>
  </head>
  <body onload="initPageObjects();">
    <div class="canvas" id="mainCanvas"
      style="width: 350px; height: 250px; border: 1px solid black;">
      <h1 class="block draggable" id="h1_block"
        style="left: 10px; top: 10px;">
          h1 block
      </h1>
      <h2 class="block draggable" id="h2_block"
        style="left: 200px; top: 100px;">
        h2 block
      </h2>
      <div class="connector h1_block h2_block"></div>
    </div>
  </body>
</html>

Activating drag and drop on the blocks is very simple: just add the draggable class to them.

The draggable class can be applied to any element in an html page... A little bonus that comes with js-graph-it.

Just a note: draggable elements must have absolute positioning and they cannot be dragged outside the bounds of their parent element (as it happens with the canvas).