mirror of
https://github.com/MartinThoma/LaTeX-examples.git
synced 2025-04-26 06:48:04 +02:00
53 lines
1.5 KiB
HTML
53 lines
1.5 KiB
HTML
<!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>
|