anchorDemo.html 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb 1.3.7 - Connection Sources and Targets Demonstration - 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/anchorDemo.css">
  8. </head>
  9. <body onunload="jsPlumb.unload();" data-demo-id="anchorDemo" data-library="jquery">
  10. <div id="demo">
  11. <div class="window" id="window1"><strong>Window 1</strong><br/><br/></div>
  12. <div class="window smallWindow" id="window2"><strong>Window 2</strong><br/><br/></div>
  13. <div class="window smallWindow" id="window3"><strong>Window 3</strong><br/><br/></div>
  14. <div class="window smallWindow" id="window4"><strong>Window 4</strong><br/><br/></div>
  15. <div class="window smallWindow" id="window5"><strong>Window 5</strong><br/><br/></div>
  16. <div class="window smallWindow" id="window6"><strong>Window 6</strong><br/><br/></div>
  17. </div>
  18. <div id="explanation">
  19. <p>This page provides a demonstration of the makeSource and makeTarget functions. Drag Connections from the
  20. big blue element to any of the small green ones. You can also drag Connections from one green element to another, because Connections in jsPlumb
  21. are, by default, detachable (this behaviour can be overridden at the default level, or on a per-call basis).</p>
  22. <p>These functions provide an alternative means of setting up your UI to support draggable connections - in the other demos you will see Endpoints
  23. being created and assigned to elements, which are then used as the sources and targets for Connections. But in this demonstration we treat entire
  24. elements as sources and targets, and only when Connections are established do we assign Endpoints for them, according to the parameters specified in
  25. the makeSource and makeTarget method calls.</p>
  26. <p>The blue element is configured as a Connection source (and is not draggable), with a list of possible Anchor
  27. locations:</p>
  28. <div class="code">
  29. <pre>
  30. var sourceAnchors = [
  31. [ 0, 1, 0, 1 ],
  32. [ 0.25, 1, 0, 1 ],
  33. [ 0.5, 1, 0, 1 ],
  34. [ 0.75, 1, 0, 1 ],
  35. [ 1, 1, 0, 1 ]
  36. ];
  37. jsPlumb.makeSource("window1", {
  38. anchor:sourceAnchors
  39. });</pre>
  40. </div>
  41. The green elements are configured as Connection targets, with a "TopCenter" anchor, and are draggable:
  42. <div class="code">
  43. <pre>
  44. var smallWindows = jsPlumb.getSelector(".smallWindow");
  45. for (var i = 0; i < smallWindows.length; i++) {
  46. jsPlumb.draggable(smallWindows[i]);
  47. jsPlumb.makeTarget(smallWindows[i], {
  48. paintStyle: { fillStyle:'#558822' },
  49. anchor:"TopCenter",
  50. dropOptions:{ hoverClass:"hover" }
  51. });
  52. }
  53. </pre>
  54. </div>
  55. <p>This demonstration uses jsPlumb 1.3.7, jQuery 1.7.1 and jQuery UI 1.8.13.</p>
  56. </div>
  57. <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>
  58. <script type='text/javascript' src='../js/jquery.jsPlumb-1.3.7-all-min.js'></script>
  59. <!-- demo code -->
  60. <script type="text/javascript" src="../js/anchorDemo.js"></script>
  61. <!-- demo helper code -->
  62. <script type="text/javascript" src="../js/demo-list.js"></script>
  63. <script type="text/javascript" src="../js/demo-helper-jquery.js"></script>
  64. </body>
  65. </html>