issue37_test-jquery.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  32. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  33. <script type="text/javascript">
  34. $(document).ready(function() {
  35. document.onselectstart = function () { return false; };
  36. var container = $("#container"), w4 = $("#window4"), w5 = $("#window5"), debug = $("#debug");
  37. var s1 = $("#spot1"), s2 = $("#spot2"), w4w = w4.outerWidth(), w4h = w4.outerHeight();
  38. w4.draggable({
  39. start : function() { debug.html(""); },
  40. drag : function(e, ui) {
  41. var o = w4.offset()
  42. // now attempt to position the spots at the tl and br corners of w4.
  43. s1.offset(o);
  44. s2.offset({left:o.left + w4w, top:o.top+w4h});
  45. },
  46. scope:"testjquerydrag",
  47. cursor:"move"
  48. });
  49. w5.droppable({
  50. scope:"testjquerydrag",
  51. hoverClass:"testHover",
  52. drop : function() { debug.html("red square dropped."); },
  53. });
  54. });
  55. </script>
  56. </body>
  57. </html>