issue71_test.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <style type="text/css">
  5. .dd {
  6. width:100px;
  7. height:100px;
  8. background-color:red;
  9. z-index:-10;
  10. }
  11. .test {
  12. width:50px;
  13. height:100px;
  14. background-color:yellow;
  15. top:200px;
  16. left:200px;
  17. }
  18. ._jsPlumb_connector{
  19. z-index:-9999999;
  20. }
  21. ._jsPlumb_endpoint{
  22. z-index:0;
  23. }
  24. </style>
  25. <!--[if IE]>
  26. <script type="text/javascript" src="../js/excanvas.js"></script>
  27. <![endif]-->
  28. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  29. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js"></script>
  30. <script type="text/javascript" src="../js/lib/mootools-1.2.4.4-more.js"></script>
  31. <script type="text/javascript" src="../js/lib/jsBezier-0.2-min.js"></script>
  32. <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
  33. <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
  34. <script type="text/javascript" src="../js/1.2.6/mootools.jsPlumb-1.2.6-RC1.js"></script>
  35. <script>
  36. window.addEvent('domready', function() {
  37. var exampleGreyEndpointOptions = {
  38. endpoint:new jsPlumb.Endpoints.Rectangle(),
  39. style:{ width:25, height:21, fillStyle:'#666' },
  40. isSource:true,maxConnections :11,
  41. connectorStyle : { strokeStyle:"#666" },
  42. isTarget:true,scope:"ex2",
  43. connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
  44. };
  45. var exampleGreyEndpointOptions1 = {
  46. endpoint:new jsPlumb.Endpoints.Dot({radius:15}),
  47. style:{ width:25, height:21, fillStyle:'blue' },
  48. isSource:true,maxConnections :11,
  49. connectorStyle : { strokeStyle:"blue" },
  50. isTarget:true,scope:"ex1",
  51. connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
  52. };
  53. var exampleGreyEndpointOptions2 = {
  54. endpoint:new jsPlumb.Endpoints.Dot({radius:25}),
  55. style:{ width:25, height:21, fillStyle:'green' },
  56. isSource:true,maxConnections :11,
  57. connectorStyle : { strokeStyle:"green" },
  58. isTarget:true,scope:"ex3",
  59. connectorOverlays: [ new jsPlumb.Overlays.Arrow({location:0.5}) ]
  60. };
  61. jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
  62. jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
  63. jsPlumb.addEndpoint('element1', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
  64. jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
  65. jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
  66. jsPlumb.addEndpoint('element2', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
  67. jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"BottomCenter"}, exampleGreyEndpointOptions));
  68. jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"TopCenter"}, exampleGreyEndpointOptions1));
  69. jsPlumb.addEndpoint('element3', jsPlumb.extend({anchor:"LeftMiddle"}, exampleGreyEndpointOptions2));
  70. jsPlumb.draggable($('element1'));
  71. jsPlumb.draggable($('element2'));
  72. jsPlumb.draggable($('element3'));
  73. });
  74. </script>
  75. </head>
  76. <body>
  77. <div id="element1" style="float:right;" class="dd">1</div>
  78. <div id="element2" class="dd">2</div>
  79. <div id="element3" class="test">3</div>
  80. </body>
  81. </html>