radu
/
LaTeX-examples


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!doctype html>
<html>
<head>
    <title>Graph example</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://jsplumb.org/js/1.3.1/jquery.jsPlumb-1.3.1-all-min.js"></script>
    <style>
.node {
    position: absolute;
    height: 50px;
    width: 50px;
    line-height: 50px;

    -moz-border-radius: 30px;
    border-radius: 30px;

    background-color: black;
    color: white;
    text-align: center;
    font-size: 2em;
}
    </style>
</head>
<body >
<div class="node" id="b1" style="top:100px;left:300px">1</div>
<div class="node" id="b2" style="top:200px;left:500px;">2</div>
<div class="node" id="b3" style="top:400px;left:400px;">3</div>
<div class="node" id="b4" style="top:400px;left:200px;">4</div>
<div class="node" id="b5" style="top:200px;left:100px;">5</div>


<script type="text/javascript">

jsPlumb.bind("ready", function() {


jsPlumb.draggable('b1');
jsPlumb.draggable('b2');
jsPlumb.draggable('b3');
jsPlumb.draggable('b4');
jsPlumb.draggable('b5');
jsPlumb.connect({source:"b1", target:"b2"});
jsPlumb.connect({source:"b2", target:"b3"});
jsPlumb.connect({source:"b3", target:"b4"});
jsPlumb.connect({source:"b1", target:"b3"});
});

</script>

</body>
</html>