| <!doctype html> |
| <html> |
| <head> |
| <title>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> |
| </head> |
| <body > |
| <div id="block1" style="position: absolute;">Block1</div> |
| <div id="block2" style="position: absolute;">Block2</div> |
| |
| |
| <script type="text/javascript"> |
| |
| var targetOption = {anchor:"TopCenter", |
| maxConnections:-1, |
| isSource:false, |
| isTarget:true, |
| endpoint:["Dot", {radius:5}], |
| paintStyle:{fillStyle:"#66FF00"}, |
| setDragAllowedWhenFull:true} |
| |
| var sourceOption = {anchor:"BottomCenter", |
| maxConnections:-1, |
| isSource:true, |
| isTarget:false, |
| endpoint:["Dot", {radius:5}], |
| paintStyle:{fillStyle:"#FFEF00"}, |
| setDragAllowedWhenFull:true} |
| |
| jsPlumb.bind("ready", function() { |
| |
| jsPlumb.addEndpoint('block1', targetOption); |
| jsPlumb.addEndpoint('block1', sourceOption); |
| |
| jsPlumb.addEndpoint('block2', targetOption); |
| jsPlumb.addEndpoint('block2', sourceOption); |
| |
| jsPlumb.draggable('block1'); |
| jsPlumb.draggable('block2'); |
| }); |
| |
| </script> |
| |
| </body> |
| </html> |
