draggableConnectorsDemo.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb 1.3.7 - draggable connectors experiments - jQuery</title>
  5. <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6. <link rel="stylesheet" href="../css/jsPlumbDemo.css">
  7. <link rel="stylesheet" href="../css/draggableConnectorsDemo.css">
  8. </head>
  9. <body onunload="jsPlumb.unload();" data-demo-id="draggableConnectorsDemo" data-library="jquery">
  10. <div id="demo">
  11. <div class="window" id="window1">one<br/><br/><a href="#" class="cmdLink hide" rel="window1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window1">detach all</a></div>
  12. <div class="window" id="window2">two<br/><br/><a href="#" class="cmdLink hide" rel="window2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window2">detach all</a></div>
  13. <div class="window" id="window3">three<br/><br/><a href="#" class="cmdLink hide" rel="window3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window3">detach all</a></div>
  14. <div class="window" id="window4">four<br/><br/><a href="#" class="cmdLink hide" rel="window4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="window4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="window4">detach all</a></div>
  15. </div>
  16. <div id="explanation">
  17. <div id="list"></div>
  18. <p>This is a demonstration of draggable connections. Drag from any Endpoint to similar Endpoints
  19. on other elements to create Connections.</p>
  20. <p>Blue endpoints are configured to use a <strong>beforeDrop</strong> interceptor, which is a new
  21. addition to jsPlumb in 1.3.7. This enables
  22. you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are
  23. also configured to automatically reattach if you drag a connection off and drop it on
  24. the background. In SVG and VML you will see a dashed line for blue connections; this is set via CSS. </p>
  25. <p>Yellow endpoints are configured to use a <strong>beforeDetach</strong> interceptor, which provides
  26. a way to programmatically override a connection detach. Yellow connections are painted with the
  27. Straight connector</p>
  28. <p>Green endpoints support up to three Connections. Once a green endpoint has three connections, when you drag from it you will drag the oldest connection made on the endpoint.</p>
  29. <a id="clear" href="#">clear plumbing</a>
  30. <p>This demo uses jsPlumb 1.3.7, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
  31. </div>
  32. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
  33. <script type='text/javascript' src='../js/jquery.jsPlumb-1.3.7-all-min.js'></script>
  34. <!-- demo code -->
  35. <script type="text/javascript" src="../js/draggableConnectorsDemo.js"></script>
  36. <script type="text/javascript" src="../js/draggableConnectorsDemo-jquery.js"></script>
  37. <!-- demo helper code -->
  38. <script type="text/javascript" src="../js/demo-list.js"></script>
  39. <script type="text/javascript" src="../js/demo-helper-jquery.js"></script>
  40. </body>
  41. </html>