draggableConnectorsDemo.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb 1.3.7 - draggable connectors experiments - MooTools</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="mootools">
  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.6.0 and jQuery UI 1.8.13.</p>
  31. </div>
  32. <!-- DEP -->
  33. <script type="text/javascript" src="../../js/lib/mootools-1.3.2-yui-compressed.js"></script>
  34. <!-- /DEP -->
  35. <script type="text/javascript" src="../js/mootools-1.3.2.1-more.js"></script>
  36. <!-- JS -->
  37. <!-- support lib for bezier stuff -->
  38. <script type="text/javascript" src="../../js/lib/jsBezier-0.3-min.js"></script>
  39. <!-- main jsplumb engine -->
  40. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-1.3.7-RC1.js"></script>
  41. <!-- connectors, endpoint and overlays -->
  42. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-defaults-1.3.7-RC1.js"></script>
  43. <!-- SVG renderer -->
  44. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-svg-1.3.7-RC1.js"></script>
  45. <!-- canvas renderer -->
  46. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-canvas-1.3.7-RC1.js"></script>
  47. <!-- vml renderer -->
  48. <script type="text/javascript" src="../../js/1.3.7/jsPlumb-renderers-vml-1.3.7-RC1.js"></script>
  49. <!-- mootools jsPlumb adapter -->
  50. <script type="text/javascript" src="../../js/1.3.7/mootools.jsPlumb-1.3.7-RC1.js"></script>
  51. <!-- /JS -->
  52. <!-- demo code -->
  53. <script type="text/javascript" src="../js/draggableConnectorsDemo.js"></script>
  54. <script type="text/javascript" src="../js/draggableConnectorsDemo-mootools.js"></script>
  55. <!-- demo helper code -->
  56. <script type="text/javascript" src="../js/demo-list.js"></script>
  57. <script type="text/javascript" src="../js/demo-helper-mootools.js"></script>
  58. </body>
  59. </html>