detachedConnectionsScopeBugYUI.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>detached scope problem</title>
  5. <meta http-equiv="X-UA-Compatible" content="IE=7">
  6. <link rel="stylesheet" href="/mp.css"></link>
  7. <link rel="stylesheet" href="../demo/css/jsPlumbDemo.css"></link>
  8. <link rel="stylesheet" href="../demo/css/demo.css"></link>
  9. <style type="text/css">
  10. .dropHover { border:1px dotted red; }
  11. .dragActive { border:2px dotted orange; }
  12. ._jsPlumb_endpoint { z-index:100; }
  13. #window1 { left:2em; top:2em; }
  14. #window2 { left:40em; top:2em; }
  15. #window3 { left:2em; top:26em; }
  16. #window4 { left:40em; top:26em; }
  17. </style>
  18. </head>
  19. <body onunload="jsPlumb.unload();">
  20. <div class="window" id="window1">WINDOW 1</div>
  21. <div class="window" id="window2">WINDOW 2</div>
  22. <div class="window" id="window3">WINDOW 3</div>
  23. <div class="window" id="window4">WINDOW 4</div>
  24. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  25. <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/simpleyui/simpleyui-min.js"></script>
  26. <script type="text/javascript" src="../js/1.2.6/jsPlumb-1.2.6-RC1.js"></script>
  27. <script type="text/javascript" src="../js/1.2.6/jsPlumb-defaults-1.2.6-RC1.js"></script>
  28. <script type="text/javascript" src="../js/1.2.6/yui.jsPlumb-1.2.6-RC1.js"></script>
  29. <script type="text/javascript" src="../js/1.2.6/jsBezier-0.2-min.js"></script>
  30. <script type="text/javascript">
  31. YUI().use('node', function(Y) {
  32. Y.on("domready", function() {
  33. // chrome fix.
  34. document.onselectstart = function () { return false; };
  35. jsPlumb.DefaultDragOptions = { cursor: 'pointer', zIndex:2000 };
  36. var e1 = {
  37. anchor:[1,0.5,1,0],
  38. isSource:true,
  39. isTarget:true,
  40. dragOptions:{ scope:"dragType1" },
  41. dropOptions:{
  42. scope:"dragType2",
  43. hoverClass:'dropHover',
  44. activeClass:'dragActive'
  45. },
  46. connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
  47. };
  48. var e2 = {
  49. anchor:[0,0.5,-1,0],
  50. isSource:true,
  51. isTarget:true,
  52. dragOptions:{
  53. scope:"dragType2"
  54. },
  55. dropOptions:{
  56. scope:"dragType1",
  57. hoverClass:"dropHover",
  58. activeClass:'dragActive'
  59. },
  60. connectorStyle:{strokeStyle:"rgb(145,145,145)", lineWidth:7}
  61. };
  62. jsPlumb.addEndpoint("window1", e1);
  63. jsPlumb.addEndpoint("window3", e1);
  64. jsPlumb.addEndpoint("window2", e2);
  65. jsPlumb.addEndpoint("window4", e2);
  66. });
  67. });
  68. </script>
  69. </body>
  70. </html>