Skip to content

Instantly share code, notes, and snippets.

@fpruitt

fpruitt/gist:2b7dfd6ac82462051cc6

Created May 20, 2014 20:33
Show Gist options
  • Save fpruitt/2b7dfd6ac82462051cc6 to your computer and use it in GitHub Desktop.
Save fpruitt/2b7dfd6ac82462051cc6 to your computer and use it in GitHub Desktop.
Download ZIP
Getting started jplumb
Raw
gistfile1.txt
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="jsPlumb/dist/js/jquery.jsPlumb-1.6.1-min.js "></script>
<style type="text/css">
.item {
border: 1px solid black;
background-color: #ddddff;
width:50px;
height:50px;
}
#container {
border: 1px solid gray;
width: 500px;
height: 500px;
}
.item {
position: absolute;
border: 1px solid black;
background-color: #ddddff;
}
</style>
<title>Getting started with jsPlumb</title>
</head>
<body>
<div id="container">
<div id='bottomLeft' class='item'style='top:100; left:50'>
</div>
<div id='bottomRight' class='item'style='top:100; left:100'>
</div>
<div id='topLeft' class='item'style='top:50; left:50'>
</div>
<div id='topRight' class='item' style='top:50; left:100'>
</div>
</div>
<script type="text/javascript">
jsPlumb.ready(function()
{
var common =
{
endpoints:["Dot", "Blank" ],
detachable:false
};
jsPlumb.connect({source:"bottomLeft", target:"topLeft", connector:"Straight"},common);
jsPlumb.connect({source:"topLeft", target:"topRight", connector:"Straight"},common);
jsPlumb.connect({source:"topRight", target:"bottomRight", connector:"Straight"},common);
jsPlumb.connect({source:"bottomRight", target:"bottomLeft", connector:"Straight"}, common);
jsPlumb.draggable('bottomLeft', {containment: 'parent'});
jsPlumb.draggable('bottomRight', {containment: 'parent'});
jsPlumb.draggable('topLeft', {containment: 'parent'});
jsPlumb.draggable('topRight', {containment: 'parent'});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment