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