ContainerWithScrollOverflowTest.html 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <!-- a test for issue 37 (and part of 23)-->
  5. <style type="text/css">
  6. #container { position:relative; overflow:scroll; width:30em; height:30em; border:1px dotted red; margin-top:4em;}
  7. .window { position:absolute; width:5em; height:5em; background-color:blue; z-index:2;}
  8. .oWindow { background-color:red; }
  9. .oWindow2 { background-color:yellow; }
  10. #window1 { left:5em; top:5em; }
  11. #window2 { left:15em; top:15em; }
  12. #window3 { left:25em; top:25em; }
  13. #window4 { left:20em; top:20em; z-index:10;}
  14. #window5 { left:10em; top:6em; }
  15. .spot { width:1em; height:1em; background-color:green; position:absolute;z-index:13;}
  16. .testHover { border:1px dotted black; }
  17. #debug { overflow:auto; width:20em; position:absolute; right:0; border:1px dotted blue;height:30em;z-index:10;top:0;margin-top:4em;}
  18. </style>
  19. </head>
  20. <body>
  21. <div id="container">
  22. <div id="window1" class="window"></div>
  23. <div id="window2" class="window"></div>
  24. <div id="window3" class="window"></div>
  25. <div id="window4" class="window oWindow">drop me on the yellow square.</div>
  26. <div id="window5" class="window oWindow2">drop the red square on me.</div>
  27. <div id="spot1" class="spot"></div>
  28. <div id="spot2" class="spot"></div>
  29. </div>
  30. <div id="debug"></div>
  31. <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
  32. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  33. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  34. <script type="text/javascript" src="../js/1.2.4/jsPlumb-1.2.4-RC1.js"></script>
  35. <script type="text/javascript" src="../js/1.2.4/jsPlumb-defaults-1.2.4-RC1.js"></script>
  36. <script type="text/javascript" src="../js/1.2.4/jquery.jsPlumb-1.2.4-RC1.js"></script>
  37. <script type="text/javascript" src="../js/1.2.4/jsBezier-0.1.js"></script>
  38. <script type="text/javascript">
  39. $(document).ready(function() {
  40. document.onselectstart = function () { return false; };
  41. jsPlumb.Defaults.Container = "container";
  42. jsPlumb.addEndpoint("window1", {
  43. isSource:true, isTarget:true,
  44. anchor:"RightMiddle"
  45. });
  46. jsPlumb.addEndpoint("window2", {
  47. isSource:true, isTarget:true,
  48. anchor:"LeftMiddle"
  49. });
  50. jsPlumb.addEndpoint("window3", {
  51. isSource:true, isTarget:true,
  52. anchor:"TopCenter"
  53. });
  54. jsPlumb.addEndpoint("window1", {
  55. isSource:true, isTarget:true,
  56. anchor:"LeftMiddle"
  57. });
  58. var container = $("#container"), w4 = $("#window4"), w5 = $("#window5"), debug = $("#debug");
  59. var s1 = $("#spot1"), s2 = $("#spot2"), w4w = w4.outerWidth(), w4h = w4.outerHeight();
  60. w4.draggable({
  61. start : function() { debug.html(""); },
  62. drag : function(e, ui) {
  63. var o = w4.offset()
  64. // now attempt to position the spots at the tl and br corners of w4.
  65. s1.offset(o);
  66. s2.offset({left:o.left + w4w, top:o.top+w4h});
  67. },
  68. scope:"testjquerydrag",
  69. cursor:"move"
  70. });
  71. w5.droppable({
  72. scope:"testjquerydrag",
  73. hoverClass:"testHover",
  74. drop : function() { debug.html("red square dropped."); },
  75. });
  76. });
  77. </script>
  78. </body>
  79. </html>