issue17_test.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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 exampleDropOptions = {
  85. tolerance:'touch',
  86. hoverClass:'dropHover',
  87. activeClass:'dragActive'
  88. };
  89. var answerEndpoint = {
  90. endpoint:new jsPlumb.Endpoints.Rectangle(),
  91. style:{ width:10, height:10, fillStyle:'#00f' },
  92. maxConnections:1,
  93. isSource:false,
  94. dragOptions : { scope:'answerConnection' },
  95. connectionStyle : {
  96. gradient:{stops:[[0,'#00f'], [0.5, '#09098e'], [1,'#00f']]},
  97. lineWidth:5,
  98. strokeStyle:"#00f"
  99. },
  100. isTarget:true,
  101. dropOptions : $.extend({scope:'questionConnection'}, exampleDropOptions)
  102. };
  103. var questionEndpoint = {
  104. endpoint:new jsPlumb.Endpoints.Dot({radius:5}),
  105. style:{ strokeStyle:'#316b31' },
  106. isSource:true,
  107. reattach:true,
  108. dragOptions : { scope:'questionConnection' },
  109. connectionStyle:{ strokeStyle:'#316b31', lineWidth:8 },
  110. connector: new jsPlumb.Connectors.Bezier(63),
  111. maxConnections:1,
  112. isTarget:false,
  113. dropOptions : $.extend({scope:'answerConnection'}, exampleDropOptions)
  114. };
  115. // setup some empty endpoints. again note the use of '$.extend' to reuse all the parameters except the location
  116. // of the anchor (purely because we want to move the anchor around here; you could set it one time and forget about it though.)
  117. $("#option1").addEndpoints([
  118. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  119. ]);
  120. $("#option2").addEndpoints([
  121. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  122. ]);
  123. $("#option3").addEndpoints([
  124. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  125. ]);
  126. $("#option4").addEndpoints([
  127. $.extend({ anchor:jsPlumb.makeAnchor(1, 0.5, 0, 0, 10, 0) }, questionEndpoint)
  128. ]);
  129. $("#choice1").addEndpoints([
  130. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  131. ]);
  132. $("#choice2").addEndpoints([
  133. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  134. ]);
  135. $("#choice3").addEndpoints([
  136. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  137. ]);
  138. $("#choice4").addEndpoints([
  139. $.extend({ anchor:jsPlumb.makeAnchor(0, 0.5, 0, 0, -10, 0) }, answerEndpoint),
  140. ]);
  141. // add the third example using the '.option' class.
  142. // $(".option").addEndpoint(answerEndpoint3);
  143. $(".hide").click(function() {
  144. jsPlumb.toggle($(this).attr("rel"));
  145. });
  146. $(".drag").click(function() {
  147. var s = jsPlumb.toggleDraggable($(this).attr("rel"));
  148. $(this).html(s ? 'disable dragging' : 'enable dragging');
  149. if (!s) $("#" + $(this).attr("rel")).addClass('drag-locked'); else $("#" + $(this).attr("rel")).removeClass('drag-locked');
  150. $("#" + $(this).attr("rel")).css("cursor", s ? "pointer" : "default");
  151. });
  152. $(".detach").click(function() {
  153. jsPlumb.detachAll($(this).attr("rel"));
  154. });
  155. $("#clear").click(function() { jsPlumb.detachEverything(); });
  156. });
  157. </script>
  158. </body>
  159. </html>