detachedConnectionScopeBug.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>detached scope problem</title>
  5. <link rel="stylesheet" href="/mp.css"></link>
  6. <link rel="stylesheet" href="../../demo/css/jsPlumbDemo.css"></link>
  7. <link rel="stylesheet" href="../../demo/css/demo.css"></link>
  8. <style type="text/css">
  9. .dropHover { border:1px dotted red; }
  10. .dragActive { border:2px dotted orange; }
  11. ._jsPlumb_endpoint { z-index:100; }
  12. #window1 { left:2em; top:2em; }
  13. #window2 { left:40em; top:2em; }
  14. #window3 { left:2em; top:26em; }
  15. #window4 { left:40em; top:26em; }
  16. </style>
  17. </head>
  18. <body onunload="jsPlumb.unload();">
  19. <div class="window" id="window1">WINDOW 1</div>
  20. <div class="window" id="window2">WINDOW 2</div>
  21. <div class="window" id="window3">WINDOW 3</div>
  22. <div class="window" id="window4">WINDOW 4</div>
  23. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  24. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
  25. <!-- support lib for bezier stuff -->
  26. <script type="text/javascript" src="../../js/lib/jsBezier-0.2-min.js"></script>
  27. <!-- main jsplumb engine -->
  28. <script type="text/javascript" src="../../js/1.3.2/jsPlumb-1.3.2-RC1.js"></script>
  29. <!-- connectors, endpoint and overlays -->
  30. <script type="text/javascript" src="../../js/1.3.2/jsPlumb-defaults-1.3.2-RC1.js"></script>
  31. <!-- SVG renderer -->
  32. <script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-svg-1.3.2-RC1.js"></script>
  33. <!-- canvas renderer -->
  34. <script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-canvas-1.3.2-RC1.js"></script>
  35. <!-- vml renderer -->
  36. <script type="text/javascript" src="../../js/1.3.2/jsPlumb-renderers-vml-1.3.2-RC1.js"></script>
  37. <!-- jquery jsPlumb adapter -->
  38. <script type="text/javascript" src="../../js/1.3.2/jquery.jsPlumb-1.3.2-RC1.js"></script>
  39. <script type="text/javascript">
  40. $(function() {
  41. // chrome fix.
  42. document.onselectstart = function () { return false; };
  43. jsPlumb.DefaultDragOptions = { cursor: 'pointer', zIndex:2000 };
  44. var e1 = {
  45. anchor:[1,0.5,1,0],
  46. isSource:true,
  47. isTarget:true,
  48. dragOptions:{ scope:"dragType1" },
  49. dropOptions:{
  50. scope:"dragType2",
  51. hoverClass:'dropHover',
  52. activeClass:'dragActive'
  53. },
  54. connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
  55. };
  56. var e2 = {
  57. anchor:[0,0.5,-1,0],
  58. isSource:true,
  59. isTarget:true,
  60. dragOptions:{
  61. scope:"dragType2"
  62. },
  63. dropOptions:{
  64. scope:"dragType1",
  65. hoverClass:"dropHover",
  66. activeClass:'dragActive'
  67. },
  68. connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
  69. };
  70. var e3 = {
  71. anchor:[0.5,1,0,1],
  72. isSource:true,
  73. isTarget:true,
  74. scope:"dragType1",
  75. connectorStyle:{strokeStyle:"rgb(45,145,145)", lineWidth:7}
  76. };
  77. jsPlumb.addEndpoint("window1", e1);
  78. jsPlumb.addEndpoint("window3", e1);
  79. jsPlumb.addEndpoint("window2", e2);
  80. jsPlumb.addEndpoint("window4", e2);
  81. jsPlumb.addEndpoint("window1", e3);
  82. });
  83. </script>
  84. </body>
  85. </html>