issue16_test.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <html>
  2. <head>
  3. <title></title>
  4. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  5. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
  7. <script type="text/javascript" src="../js/1.2.2/jsPlumb-1.2.2-RC1.js"></script>
  8. <script type="text/javascript" src="../js/1.2.2/jsPlumb-defaults-1.2.2-RC1.js"></script>
  9. <script type="text/javascript" src="../js/1.2.2/jquery.jsPlumb-1.2.2-RC1.js"></script>
  10. <style>
  11. li {
  12. margin-bottom: 20px;
  13. }
  14. #option1 {
  15. float: left;
  16. }
  17. #option2 {
  18. border-color: blue;
  19. float: left;
  20. }
  21. #option3 {
  22. border-color: green;
  23. float: left;
  24. }
  25. #option4 {
  26. border-color: purple;
  27. float: left;
  28. }
  29. #option5 {
  30. border-color: black;
  31. float: left;
  32. }
  33. #propositions {
  34. float: left;
  35. width: 80px;
  36. }
  37. #choices {
  38. margin-left: 500px;
  39. width: 80px;
  40. }
  41. ._jsPlumb_endpoint {
  42. z-index:50;
  43. }
  44. ._jsPlumb_connector {
  45. z-index:1;
  46. }
  47. .dropHover {
  48. border:1px dotted red;
  49. }
  50. .dragActive {
  51. border:2px dotted orange;
  52. }
  53. .cmdLink {
  54. font-size:0.8em;
  55. }
  56. #clear {
  57. padding:0.3em;
  58. }
  59. #clear:hover {
  60. background-color:yellow;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <ul id="propositions">
  66. <li id="option1" class="prop">Option 1</li>
  67. <li id="option2" class="prop">Option 2</li>
  68. <li id="option3" class="prop">Option 3</li>
  69. <li id="option4" class="prop">Option 4</li>
  70. </ul>
  71. <ul id="choices">
  72. <li id="choice1">Choice 1</li>
  73. <li id="choice2">Choice 2</li>
  74. <li id="choice3">Choice 3</li>
  75. <li id="choice4">Choice 4</li>
  76. </ul>
  77. <script type="text/javascript">
  78. $(document).ready(function() {
  79. jsPlumb.Defaults.DragOptions = { cursor: 'pointer', zIndex:2000 };
  80. jsPlumb.Defaults.PaintStyle = { strokeStyle:'#666' };
  81. jsPlumb.Defaults.EndpointStyle = { width:5, height:5, strokeStyle:'#666' };
  82. jsPlumb.Defaults.Endpoint = new jsPlumb.Endpoints.Rectangle();
  83. jsPlumb.Defaults.Anchors = [jsPlumb.Anchors.TopCenter, jsPlumb.Anchors.TopCenter];
  84. var exampleGreyEndpoint = {
  85. endpoint:new jsPlumb.Endpoints.Rectangle(),
  86. anchor:jsPlumb.Anchors.TopCenter,
  87. style:{ width:10, height:10, fillStyle:'#666' },
  88. isSource:true,
  89. dragOptions : { scope:'exampleGreyConnection' },
  90. connectionStyle : {
  91. strokeStyle:"#666"
  92. },
  93. isTarget:true,
  94. dropOptions : $.extend({scope:'exampleGreyConnection'}, exampleDropOptions)
  95. };
  96. var exampleDropOptions = {
  97. tolerance:'touch',
  98. hoverClass:'dropHover',
  99. drop : function(e, ui) {
  100. //console.log(e);
  101. // var $caller = ui.draggable[0].id;
  102. // var $caller_id = $('#' + $caller).attr('elid');
  103. // console.log($('#' + $caller_id)[0].parentNode);
  104. // if ($('#' + $caller_id)[0].parentNode.id == "propositions") {
  105. // console.log('ok');
  106. // }
  107. // else {
  108. // console.log('ko');
  109. // }
  110. },
  111. activeClass:'dragActive'
  112. };
  113. //rop:function(e, ui) { alert('drop!'); }
  114. /**
  115. 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
  116. and target. the 'scope' of this Endpoint is 'questionConnection', meaning any connection starting from this Endpoint is of type
  117. 'questionConnection' and can only be dropped on an Endpoint target that declares 'answerEndpoint' as its drop scope, and also that
  118. only 'questionConnection' types can be dropped here.
  119. the connection style for this endpoint is a Bezier curve (we didn't provide one, so we use the default), with a lineWidth of
  120. 5 pixels, and a gradient.
  121. note the use of the '$.extend' function to setup generic connection types. this will save you a lot of typing, and probably
  122. errors.
  123. */
  124. var answerEndpoint = {
  125. endpoint:new jsPlumb.Endpoints.Rectangle(),
  126. style:{ width:10, height:10, fillStyle:'#00f' },
  127. maxConnections:1,
  128. isSource:false,
  129. dragOptions : { scope:'answerConnection' },
  130. connectionStyle : {
  131. gradient:{stops:[[0,'#00f'], [0.5, '#09098e'], [1,'#00f']]},
  132. lineWidth:5,
  133. strokeStyle:"#00f"
  134. },
  135. isTarget:true,
  136. dropOptions : $.extend({scope:'questionConnection'}, exampleDropOptions)
  137. };
  138. /**
  139. the second example uses a Dot of radius 15 as the endpoint marker, is both a source and target, and has scope
  140. 'answerConnection'.
  141. */
  142. var questionEndpoint = {
  143. endpoint:new jsPlumb.Endpoints.Dot({radius:5}),
  144. style:{ strokeStyle:'#316b31' },
  145. isSource:true,
  146. reattach:true,
  147. dragOptions : { scope:'questionConnection' },
  148. connectionStyle:{ strokeStyle:'#316b31', lineWidth:8 },
  149. connector: new jsPlumb.Connectors.Bezier(63),
  150. maxConnections:1,
  151. isTarget:false,
  152. dropOptions : $.extend({scope:'answerConnection'}, exampleDropOptions)
  153. };
  154. /**
  155. the third example uses a Dot of radius 17 as the endpoint marker, is both a source and target, and has scope
  156. 'questionConnection3'. it uses a Straight connector, and the Anchor is created here (bottom left corner) and never
  157. overriden, so it appears in the same place on every element.
  158. this example also sets the 'reattach' flag for the Endpoint, meaning that when you drag a
  159. connection off an endpoint and release it, it snaps back. the default behaviour in this case
  160. is to delete the connection.
  161. */
  162. var example3Color = "rgba(229,219,61,0.5)";
  163. var answerEndpoint3 = {
  164. endpoint:new jsPlumb.Endpoints.Dot({radius:3}),
  165. reattach:true,
  166. anchor:jsPlumb.Anchors.BottomLeft,
  167. style:{ strokeStyle:example3Color, opacity:0.5 },
  168. isSource:true,
  169. dragOptions : { scope:'questionConnection3' },
  170. connectionStyle:{ strokeStyle:example3Color, lineWidth:4 },
  171. connector : new jsPlumb.Connectors.Straight(),
  172. isTarget:true,
  173. dropOptions : $.extend({scope:'questionConnection3'}, exampleDropOptions)
  174. };
  175. // setup some empty endpoints. again note the use of '$.extend' to reuse all the parameters except the location
  176. // of the anchor (purely because we want to move the anchor around here; you could set it one time and forget about it though.)
  177. $("#option1").addEndpoints([
  178. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  179. ]);
  180. $("#option2").addEndpoints([
  181. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  182. ]);
  183. $("#option3").addEndpoints([
  184. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  185. ]);
  186. $("#option4").addEndpoints([
  187. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  188. ]);
  189. $("#choice1").addEndpoints([
  190. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  191. ]);
  192. $("#choice2").addEndpoints([
  193. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  194. ]);
  195. $("#choice3").addEndpoints([
  196. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  197. ]);
  198. $("#choice4").addEndpoints([
  199. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  200. ]);
  201. // add the third example using the '.option' class.
  202. $(".option").addEndpoint(answerEndpoint3);
  203. $(".hide").click(function() {
  204. jsPlumb.toggle($(this).attr("rel"));
  205. });
  206. $(".drag").click(function() {
  207. var s = jsPlumb.toggleDraggable($(this).attr("rel"));
  208. $(this).html(s ? 'disable dragging' : 'enable dragging');
  209. if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
  210. $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
  211. });
  212. $(".detach").click(function() {
  213. jsPlumb.detachAll($(this).attr("rel"));
  214. });
  215. $("#clear").click(function() { jsPlumb.detachEverything(); });
  216. });
  217. </script>
  218. </body>
  219. </html>