draggableConnectorsWithArrows.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>jsPlumb - draggable connectors experiments - jQuery</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=7">
  6. <link rel="stylesheet" href="/mp.css"></link>
  7. <link rel="stylesheet" href="../css/jsPlumbDemo.css"></link>
  8. <style type="text/css">
  9. #window1 { top:6em;left:15%; }
  10. #window2 { top:6em; right:15%; }
  11. #window3 { top:24em; left:15%; }
  12. #window4 { top:24em; right:15%}
  13. .window { border:1px solid gray; width:9.7em; height:8em; z-index:20; position:absolute; color:gray;font-family:serif;font-style:italic;
  14. padding-top:0.9em; font-size:0.9em;text-align:center;z-index:40;background-color:white; }
  15. .drag-locked { border:1px solid red; }
  16. ._jsPlumb_endpoint { z-index:50; }
  17. ._jsPlumb_connector { z-index:1; }
  18. .dropHover { border:1px dotted red; }
  19. .dragActive { border:2px dotted orange; }
  20. #explanation { width:30%; background-color:transparent;z-index:2;font-size:1.2em;color:gray;border:none;position:relative;left:35%;right:auto;text-align:center; }
  21. .cmdLink { font-size:0.80em;}
  22. #clear { padding:0.3em; }
  23. #clear:hover { background-color:yellow; }
  24. #list { display:none; border-bottom:1px dotted grey; padding-bottom:1.5em; font-size:90%;}
  25. #list table { width:100%; text-align:left;}
  26. </style>
  27. </head>
  28. <body onunload="jsPlumb.unload();">
  29. <div class="menu"><a href="../index.html" class="mplink">jsPlumb home</a>&nbsp;|&nbsp;<a href="../../doc/usage.html" class="mplink">view documentation</a>&nbsp;|&nbsp;<a href="mailto:simon.porritt@gmail.com" class="mplink">contact me</a>&nbsp;|&nbsp;<a href="http://code.google.com/p/jsplumb/" class="mplink">jsPlumb on Google code</a></div>
  30. <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>
  31. <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>
  32. <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>
  33. <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>
  34. <div id="explanation">
  35. <div id="list"></div>
  36. <p>this demo uses jsPlumb 1.2.3, jQuery 1.4.2 and jQuery UI 1.8.0.</p><p>drag between similar endpoints to create connections.</p><p>upon disconnection, yellow connections automatically reattach</p><p>the others are removed.</p><p>green endpoints support up to three connections.</p>
  37. <a id="clear" href="#">clear plumbing</a><br/><br/>
  38. <a href="dragAnimDemo.html">next: animated dragging demo</a><br/><br/>
  39. see a <a href="../mootools/draggableConnectorsDemo.html">MooTools version</a> of this demo.
  40. </div>
  41. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  42. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  43. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  44. <script type="text/javascript" src="../js/1.2.4/jsPlumb-1.2.4-RC1.js"></script>
  45. <script type="text/javascript" src="../js/1.2.4/jsPlumb-defaults-1.2.4-RC1.js"></script>
  46. <script type="text/javascript" src="../js/1.2.4/jquery.jsPlumb-1.2.4-RC1.js"></script>
  47. <script type="text/javascript" src="../js/1.2.4/jsBezier-0.1.js"></script>
  48. <script type="text/javascript">
  49. $(document).ready(function() {
  50. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  51. jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
  52. jsPlumb.Defaults.EndpointStyle = { width:20, height:16, strokeStyle:'#666' };
  53. jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Rectangle();
  54. jsPlumb.Defaults.Anchors = [jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.TopCenter];
  55. var showConnections = function() {
  56. var c = jsPlumb.getConnections();
  57. var foundSome = false;
  58. var s = "<span>current connections</span><br/><br/><table><tr><th>scope</th><th>source</th><th>target</th></tr>";
  59. for (var i in c) {
  60. var l = c[i];
  61. if (l && l.length > 0) {
  62. foundSome = true;
  63. for (var j = 0; j < l.length; j++) {
  64. s = s + "<tr><td>" + i + "</td>" + "<td>" + l[j].sourceId + "</td><td>" + l[j].targetId + "</td></tr>";
  65. }
  66. }
  67. }
  68. s = s + "</table>";
  69. if (foundSome) {
  70. $("#list").html(s);
  71. $("#list").fadeIn({complete:function() { jsPlumb.repaintEverything(); }});
  72. } else $("#list").fadeOut({complete:function() { jsPlumb.repaintEverything(); }});
  73. };
  74. // connection listener
  75. jsPlumb.addListener(["jsPlumbConnection","jsPlumbConnectionDetached"], {
  76. jsPlumbConnection : function(p) { showConnections(); },
  77. jsPlumbConnectionDetached : function(p) { showConnections(); }
  78. });
  79. var exampleDropOptions = {
  80. tolerance:'touch',
  81. hoverClass:'dropHover',
  82. activeClass:'dragActive'
  83. };
  84. /**
  85. first example endpoint. it's a 25x21 rectangle (the size is provided in the 'style' arg to the Endpoint), and it's both a source
  86. and target. the 'scope' of this Endpoint is 'exampleConnection', meaning any connection starting from this Endpoint is of type
  87. 'exampleConnection' and can only be dropped on an Endpoint target that declares 'exampleEndpoint' as its drop scope, and also that
  88. only 'exampleConnection' types can be dropped here.
  89. the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
  90. 5 pixels, and a gradient.
  91. note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
  92. errors.
  93. */
  94. var exampleColor = '#00f';
  95. var exampleEndpoint = {
  96. endpoint:new jsPlumb.Endpoints.Rectangle(),
  97. style:{ width:25, height:21, fillStyle:exampleColor },
  98. isSource:true,
  99. scope:'blue rectangle',
  100. connectorStyle : {
  101. gradient:{stops:[[0, exampleColor], [0.5, '#09098e'], [1, exampleColor]]},
  102. lineWidth:5,
  103. strokeStyle:exampleColor
  104. },
  105. connectorOverlays:[new jsPlumb.Overlays.Arrow({fillStyle:"#09098e"})],
  106. isTarget:true,
  107. dropOptions : exampleDropOptions
  108. };
  109. /**
  110. the second example uses a Dot of radius 15 as the endpoint marker, is both a source and target, and has scope
  111. 'exampleConnection2'.
  112. */
  113. var color2 = '#316b31';
  114. var exampleEndpoint2 = {
  115. endpoint:new jsPlumb.Endpoints.Dot({radius:15}),
  116. style:{ strokeStyle:color2 },
  117. isSource:true,
  118. scope:'green dot',
  119. connectorStyle:{ strokeStyle:color2, lineWidth:8 },
  120. connector: new jsPlumb.Connectors.Bezier(63),
  121. maxConnections:3,
  122. isTarget:true,
  123. dropOptions : exampleDropOptions
  124. };
  125. /**
  126. the third example uses a Dot of radius 17 as the endpoint marker, is both a source and target, and has scope
  127. 'exampleConnection3'. it uses a Straight connector, and the Anchor is created here (bottom left corner) and never
  128. overriden, so it appears in the same place on every element.
  129. this example also sets the 'reattach' flag for the Endpoint, meaning that when you drag a
  130. connection off an endpoint and release it, it snaps back. the default behaviour in this case
  131. is to delete the connection.
  132. */
  133. var example3Color = "rgba(229,219,61,0.5)";
  134. var exampleEndpoint3 = {
  135. endpoint:new jsPlumb.Endpoints.Dot({radius:17}),
  136. reattach:true,
  137. anchor:jsPlumb.Anchors.BottomLeft,
  138. style:{ strokeStyle:example3Color, opacity:0.5 },
  139. isSource:true,
  140. scope:'yellow dot',
  141. connectorStyle:{ strokeStyle:example3Color, lineWidth:4 },
  142. connector : new jsPlumb.Connectors.Straight(),
  143. isTarget:true,
  144. dropOptions : exampleDropOptions
  145. };
  146. // setup some empty endpoints. again note the use of '$.extend' to reuse all the parameters except the location
  147. // of the anchor (purely because we want to move the anchor around here; you could set it one time and forget about it though.)
  148. jsPlumb.addEndpoint('window1', $.extend({ anchor:jsPlumb.makeAnchor(0.5, 1, 0, 1) }, exampleEndpoint2));
  149. //
  150. // here's an example of how the SelectiveAnchor stuff added to 1.2.3 works with
  151. // drag and drop connectors.
  152. //
  153. var anchors = [jsPlumb.makeAnchor(1, 0.2, 1, 0), jsPlumb.makeAnchor(0.8, 1, 0, 1), jsPlumb.makeAnchor(0, 0.8, -1, 0), jsPlumb.makeAnchor(0.2, 0, 0, -1) ];
  154. var sa = jsPlumb.makeDynamicAnchor(anchors);
  155. jsPlumb.addEndpoint('window1', $.extend({ anchor:sa }, exampleEndpoint));
  156. jsPlumb.addEndpoints('window2', [
  157. $.extend({ anchor:jsPlumb.makeAnchor(0.5, 1, 0, 1) }, exampleEndpoint),
  158. $.extend({ anchor:jsPlumb.Anchors.RightMiddle }, exampleEndpoint2)
  159. ]);
  160. jsPlumb.addEndpoints('window3', [
  161. $.extend({ anchor:jsPlumb.makeAnchor(0.25, 0, 0, -1) }, exampleEndpoint),
  162. $.extend({ anchor:jsPlumb.makeAnchor(0.75, 0, 0, -1) }, exampleEndpoint2)
  163. ]);
  164. jsPlumb.addEndpoints('window4', [
  165. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 1, 0) }, exampleEndpoint),
  166. $.extend({ anchor:jsPlumb.makeAnchor(0.25, 0, 0, -1) }, exampleEndpoint2)
  167. ]);
  168. // three ways to do this - an id, a list of ids, or a selector (note the two different types of selectors shown here...anything that is valid jquery will work of course)
  169. //jsPlumb.draggable("window1");
  170. //jsPlumb.draggable(["window1", "window2"]);
  171. //jsPlumb.draggable($("#window1"));
  172. jsPlumb.draggable($(".window"));
  173. // add the third example using the '.window' class.
  174. $(".window").addEndpoint(exampleEndpoint3);
  175. $(".hide").click(function() {
  176. jsPlumb.toggle($(this).attr("rel"));
  177. });
  178. $(".drag").click(function() {
  179. var s = jsPlumb.toggleDraggable($(this).attr("rel"));
  180. $(this).html(s ? 'disable dragging' : 'enable dragging');
  181. if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
  182. $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
  183. });
  184. $(".detach").click(function() {
  185. jsPlumb.detachAll($(this).attr("rel"));
  186. });
  187. $("#clear").click(function() { jsPlumb.detachEverything(); showConnections(); });
  188. });
  189. </script>
  190. <!-- Start of StatCounter Code -->
  191. <script type="text/javascript">
  192. var sc_project=5700644;
  193. var sc_invisible=1;
  194. var sc_partition=71;
  195. var sc_click_stat=1;
  196. var sc_security="1cb90164";
  197. </script>
  198. <script type="text/javascript"
  199. src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
  200. class="statcounter"><a title="counter for wordpress"
  201. href="http://www.statcounter.com/wordpress.org/"
  202. target="_blank"><img class="statcounter"
  203. src="http://c.statcounter.com/5700644/0/1cb90164/1/"
  204. alt="counter for wordpress" ></a></div></noscript>
  205. <!-- End of StatCounter Code -->
  206. </body>
  207. </html>